/* ═══════════════════════════════════════════════════════════════════════════
   Platinumlist Design System — local build for Platitude
   ═══════════════════════════════════════════════════════════════════════════

   This file mirrors the token vocabulary documented in "PL Design System in
   Claude Code / cowork / cloud". If the `pl-design-system` plugin's own
   design-system.css is dropped into this folder, replace this file with it —
   the token names below are deliberately identical, so nothing else changes.

   Values marked (doc) are quoted directly from the design system page.
   Values marked (inferred) were not specified there and were chosen to match
   the documented usage — they are the ones to check against the real plugin.

   Light loads by default. `light-dark()` handles the switch, so a single set of
   declarations serves both themes.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Fonts ───────────────────────────────────────────────────────────────────
   Local files only. The design system explicitly forbids the Google Fonts CDN.
   Drop InterVariable.ttf and MDNichrome-*.otf into /public/fonts/ — until then
   the stacks fall through to system faces and the layout still holds.        */

@font-face {
  font-family: 'Inter Variable';
  src: url('/fonts/InterVariable.ttf') format('truetype-variations'),
       url('/fonts/InterVariable.ttf') format('truetype');
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: 'MD Nichrome';
  src: url('/fonts/MDNichrome-Regular.otf') format('opentype');
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'MD Nichrome';
  src: url('/fonts/MDNichrome-Bold.otf') format('opentype');
  font-weight: 700;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* ── Palette ──────────────────────────────────────────────────────────── */

  /* Poodle — the brand purple (doc) */
  --poodle-primary: #7E05E8;
  --poodle-50:      #9737EC;
  --poodle-40:      #B169F1;
  --poodle-20:      #E5CDFA;

  /* Aussie — the neutral ramp (doc) */
  --aussie-white: #FFFFFF;
  --aussie-10:    #F5F5F8;
  --aussie-20:    #ECEDF2;
  --aussie-30:    #DCDCE0;   /* (inferred) documented only as border-hover */
  --aussie-60:    #9999AC;
  --aussie-70:    #6E6E81;
  --aussie-80:    #B3B3C3;
  --aussie-90:    #2C2C38;
  --aussie-95:    #24242E;
  --aussie-100:   #0F0F15;

  /* Accents (doc) */
  --accent-success:  #30BB47;
  --accent-alert:    #F93643;
  --accent-warning:  #FF8300;   /* orange — passes on white */
  --accent-caution:  #F9C54B;   /* yellow — fails on white, tints only */
  --link-base:       #1A56FF;

  /* ── Semantic surfaces ────────────────────────────────────────────────── */
  --bg-default:      light-dark(#FFFFFF, #0F0F15);
  --bg-secondary:    light-dark(#ECEDF2, #24242E);
  --bg-hover:        light-dark(#F5F5F8, #2C2C38);
  --bg-wash:         light-dark(#F5F5F8, #24242E);
  --bg-border:       light-dark(#ECEDF2, #2C2C38);
  --bg-border-hover: light-dark(#DCDCE0, #3A3A46);
  --bg-fade:         light-dark(rgba(15, 15, 21, .45), rgba(0, 0, 0, .6));

  /* ── Semantic content ─────────────────────────────────────────────────────
     Three distinct levels. Never collapse secondary into highlight — column
     headers rendered at #B3B3C3 are the documented failure mode.            */
  --content-primary:   light-dark(#0F0F15, #FFFFFF);
  --content-secondary: light-dark(#6E6E81, #B3B3C3);
  --content-highlight: light-dark(#B3B3C3, #6E6E81);

  /* ── Interaction ──────────────────────────────────────────────────────── */
  --interaction-primary-bg:        var(--poodle-primary);
  --interaction-primary-content:   #FFFFFF;
  --interaction-secondary-bg:      light-dark(#ECEDF2, #2C2C38);
  --interaction-secondary-content: light-dark(#0F0F15, #FFFFFF);

  /* ── Type ─────────────────────────────────────────────────────────────── */
  --font-family-default: 'Inter Variable', Inter, -apple-system, BlinkMacSystemFont,
                         'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-accent:         'MD Nichrome', 'Inter Variable', Inter, -apple-system,
                         BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font:                var(--font-family-default);

  --font-weight-regular: 400;
  --font-weight-medium:  500;
  --font-weight-semibold: 600;
  --font-weight-bold:    700;

  /* ── Spacing (doc) ────────────────────────────────────────────────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;

  --spacing-1: var(--space-1);
  --spacing-2: var(--space-2);
  --spacing-3: var(--space-3);
  --spacing-4: var(--space-4);
  --spacing-5: var(--space-5);
  --spacing-6: var(--space-6);

  /* ── Radius (inferred — the docs pin only the 10px tab container) ─────── */
  --radius-xs:   8px;
  --radius-base: 10px;
  --radius-lg:   14px;
  --radius-pill: 999px;

  /* ── Elevation (inferred) ─────────────────────────────────────────────── */
  --shadow-sm: 0 1px 2px light-dark(rgba(15, 15, 21, .06), rgba(0, 0, 0, .4));
  --shadow-md: 0 6px 20px light-dark(rgba(15, 15, 21, .10), rgba(0, 0, 0, .5));

  --duration-base: .15s;
}

/* Explicit theme choices beat the OS preference in both directions. */
[data-theme="light"] { color-scheme: light; }
[data-theme="dark"]  { color-scheme: dark; }

/* On dark, the brand purple is too heavy against a near-black surface. */
[data-theme="dark"] {
  --interaction-primary-bg: var(--poodle-40);
}

/* ── Base ─────────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.55;
  color: var(--content-primary);
  background: var(--bg-secondary);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--font-accent);
  font-weight: var(--font-weight-bold);
  color: var(--content-primary);
  margin: 0 0 var(--space-3) 0;
  line-height: 1.2;
}

h1 { font-size: 30px; letter-spacing: -.01em; }
h2 { font-size: 21px; }
h3 { font-size: 17px; }

a { color: var(--link-base); text-decoration: none; }
a:hover { text-decoration: underline; }

::selection { background: var(--poodle-20); color: var(--aussie-100); }

:focus-visible {
  outline: 2px solid var(--poodle-primary);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

/* ── Components ───────────────────────────────────────────────────────────── */

.pl-card {
  background: var(--bg-default);
  border: 1px solid var(--bg-border);
  border-radius: var(--radius-base);
  box-shadow: var(--shadow-sm);
}

.pl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 10px 18px;
  border: 1px solid transparent;
  border-radius: var(--radius-xs);
  font-family: var(--font);
  font-size: 14px;
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: background var(--duration-base), border-color var(--duration-base),
              opacity var(--duration-base);
}

.pl-btn--primary {
  background: var(--interaction-primary-bg);
  color: var(--interaction-primary-content);
}
.pl-btn--primary:hover:not(:disabled) { background: var(--poodle-50); }

.pl-btn--secondary {
  background: var(--bg-default);
  border-color: var(--bg-border-hover);
  color: var(--content-primary);
}
.pl-btn--secondary:hover:not(:disabled) { background: var(--bg-hover); }

.pl-btn--ghost {
  background: transparent;
  color: var(--content-secondary);
}
.pl-btn--ghost:hover:not(:disabled) { background: var(--bg-hover); color: var(--content-primary); }

.pl-btn--danger {
  background: var(--bg-default);
  border-color: var(--accent-alert);
  color: var(--accent-alert);
}
.pl-btn--danger:hover:not(:disabled) { background: rgba(249, 54, 67, .08); }

.pl-btn:disabled { opacity: .45; cursor: not-allowed; }

/* Form controls — recessed into the page, never a dark plate on a light card */
.pl-input,
.pl-textarea,
.pl-select {
  width: 100%;
  padding: 10px 14px;
  background: var(--bg-secondary);
  border: 1px solid var(--bg-border);
  border-radius: var(--radius-xs);
  color: var(--content-primary);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.55;
  transition: border-color var(--duration-base), background var(--duration-base);
}

.pl-textarea { resize: vertical; min-height: 108px; }

.pl-input::placeholder,
.pl-textarea::placeholder { color: var(--content-highlight); }

.pl-input:focus,
.pl-textarea:focus,
.pl-select:focus {
  outline: none;
  background: var(--bg-default);
  border-color: var(--poodle-primary);
  box-shadow: 0 0 0 3px rgba(126, 5, 232, .10);
}

.pl-label {
  display: block;
  margin-bottom: var(--space-2);
  font-size: 13px;
  font-weight: var(--font-weight-semibold);
  color: var(--content-primary);
}

.pl-help {
  margin-top: var(--space-2);
  font-size: 13px;
  color: var(--content-secondary);
}

/* Tabs — the documented pill pattern. Underline-only tabs merge visually. */
.tabs-bar {
  display: flex;
  gap: var(--space-1);
  background: var(--bg-default);
  border: 1px solid var(--bg-border);
  border-radius: var(--radius-base);
  padding: 4px;
  width: fit-content;
  max-width: 100%;
  overflow-x: auto;
}

.tab-btn {
  padding: 8px 18px;
  border: none;
  background: transparent;
  color: var(--content-secondary);
  font-family: var(--font);
  font-size: 13px;
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
  cursor: pointer;
  border-radius: 7px;
  transition: all var(--duration-base);
}
.tab-btn:hover { color: var(--content-primary); background: var(--bg-hover); }
.tab-btn.active {
  background: var(--interaction-primary-bg);
  color: var(--interaction-primary-content);
}

/* Chips */
.pl-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--bg-border);
  background: var(--bg-wash);
  color: var(--content-secondary);
  font-size: 12px;
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
}

.pl-chip--brand   { background: rgba(126, 5, 232, .08); color: var(--poodle-primary); border-color: rgba(126, 5, 232, .20); }
.pl-chip--success { background: rgba(48, 187, 71, .10); color: #1F8A32; border-color: rgba(48, 187, 71, .25); }
.pl-chip--warning { background: rgba(255, 131, 0, .10); color: #B85F00; border-color: rgba(255, 131, 0, .25); }
.pl-chip--alert   { background: rgba(249, 54, 67, .10); color: #C9202B; border-color: rgba(249, 54, 67, .25); }

[data-theme="dark"] .pl-chip--success { color: var(--accent-success); }
[data-theme="dark"] .pl-chip--warning { color: var(--accent-warning); }
[data-theme="dark"] .pl-chip--alert   { color: var(--accent-alert); }
[data-theme="dark"] .pl-chip--brand   { color: var(--poodle-40); }

/* Tables — wide ones scroll rather than clip */
.pl-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--bg-border);
  border-radius: var(--radius-base);
  background: var(--bg-default);
}

.pl-table { border-collapse: collapse; width: 100%; }

.pl-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--bg-default);
  padding: 10px 14px;
  text-align: left;
  font-size: 11px;
  font-weight: var(--font-weight-bold);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--content-secondary);
  border-bottom: 1px solid var(--bg-border);
  border-right: 1px solid var(--bg-border-hover);
  white-space: nowrap;
}
.pl-table thead th:last-child { border-right: none; }

.pl-table tbody td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--bg-border);
  color: var(--content-primary);
  vertical-align: top;
}
.pl-table tbody tr:last-child td { border-bottom: none; }
.pl-table tbody tr:hover td { background: rgba(126, 5, 232, .04); }

.pl-table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: var(--font-weight-semibold);
}

/* Theme toggle */
.theme-toggle {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-xs);
  border: 1px solid var(--bg-border);
  background: var(--bg-default);
  cursor: pointer;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color var(--duration-base);
}
.theme-toggle:hover { border-color: var(--bg-border-hover); }

/* Sub-brand lockup — "Platinumlist / platitude" */
.pl-logo-subbrand { display: inline-flex; flex-direction: column; gap: 0; }
.pl-logo-subbrand img { display: block; width: var(--pl-logo-w); height: auto; }
.pl-logo-subbrand-subtitle {
  font-family: var(--font-family-default);
  font-size: calc(var(--pl-logo-w) * .13);
  font-weight: var(--font-weight-medium);
  color: var(--content-secondary);
  padding-left: calc(var(--pl-logo-w) * .19);
  margin-top: calc(var(--pl-logo-w) * -.02);
  letter-spacing: 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}