/* public/css/tokens.css — Phase 2 of the refactor (REFACTOR_PLAN.md §7).
   Copied verbatim from public/dashboard-v2.css lines 13..216. */

:root {
  /* Dark surfaces — deep warm-ink bg with cream foreground */
  --cream:        oklch(20% 0.018 60);
  --cream-2:      oklch(24% 0.020 60);
  --cream-3:      oklch(28% 0.022 60);
  --hairline:     oklch(96% 0.012 80 / 0.10);
  --hairline-2:   oklch(96% 0.012 80 / 0.18);
  --hairline-3:   oklch(96% 0.012 80 / 0.28);
  --orange:       oklch(72% 0.16 38);
  --orange-deep:  oklch(64% 0.18 38);
  --orange-soft:  oklch(78% 0.14 38);
  --orange-wash:  oklch(72% 0.16 38 / 0.14);
  --ink:          oklch(96% 0.012 80);
  --ink-2:        oklch(92% 0.014 80);
  --ink-mute:     oklch(74% 0.014 80);
  --ink-soft:     oklch(64% 0.012 80);
  --ink-faint:    oklch(52% 0.010 80);
  --green:        oklch(70% 0.12 140);
  --green-soft:   oklch(28% 0.06 140);
  --red:          oklch(64% 0.18 38);
  --blue:         #2A6FE1;
  --blue-soft:    rgba(42, 111, 225, 0.18);
  /* Layered surfaces */
  --paper:        oklch(24% 0.020 60);
  --bone:         oklch(26% 0.020 60);
  /* Unified "top band" colour — Safari chrome (theme-color meta) +
     mob-topbar + mobile drawer + the topmost wave-bands rect all use
     this so the chrome → topbar → sidebar surface reads as one
     continuous layer when the drawer slides out. Dark-theme value
     matches --cream so the same blend works under dark. */
  --topband:      oklch(20% 0.018 60);
  /* Premium glass */
  --glass-bg:     rgba(31, 22, 17, 0.78);
  --glass-blur:   saturate(140%) blur(14px);
  /* Easing */
  --ease-out:     cubic-bezier(0.2, 0, 0, 1);
  --ease-in-out:  cubic-bezier(0.4, 0, 0.2, 1);
  /* Space tokens (4px grid) */
  --space-1:  4px;  --space-2:  8px;  --space-3: 12px;
  --space-4: 16px;  --space-5: 20px;  --space-6: 24px;
  --space-7: 32px;  --space-8: 40px;  --space-9: 48px; --space-10: 64px;
  /* Card geometry (Anthropic-grade restraint) */
  --card-pad:        36px;
  --card-pad-tight:  22px;
  --card-radius:      12px;
  --card-radius-data:  8px;
  /* Content widths */
  --content-max:        940px;
  --content-max-narrow: 720px;
}

/* === Light theme override (Claude-style near-neutral) === */
[data-theme="light"] {
  /* Surfaces. Reads as plain white at a glance; only on close
     inspection is there a microscopic warm tint. Matches the
     anthropic.com / claude.ai page surface. */
  --cream:        #FBFBFB;                   /* page bg — neutral almost-white (de-creamed) */
  --cream-2:      #F1F1F1;                   /* hover bg, neutral grey step */
  --cream-3:      #E5E5E5;                   /* deep hover / pressed (neutral) */
  --paper:        #FFFFFF;                   /* card surface, pure white */
  --bone:         #FCFCFC;                   /* alt card surface (neutral) */
  --topband:      #FEFEFD;                   /* chrome/topbar/drawer (sidebar) — almost-white, founder pick */

  /* Hairlines. warm-ink-based alpha so they stay quiet on any cream */
  --hairline:     rgba(31, 22, 17, 0.08);
  --hairline-2:   rgba(31, 22, 17, 0.14);
  --hairline-3:   rgba(31, 22, 17, 0.22);

  /* Ink. warm near-black, matches landing */
  --ink:          #1F1611;
  --ink-2:        #2A1F17;
  --ink-mute:     #6B5A4C;
  --ink-soft:     #8A7866;
  --ink-faint:    oklch(72% 0.012 75);

  /* Accent. keep orange but slightly recalibrated for white bg contrast */
  --orange:       oklch(58% 0.18 38);       /* slightly deeper, sits well on white */
  --orange-deep:  oklch(50% 0.20 38);
  --orange-soft:  oklch(70% 0.14 38);
  --orange-wash:  oklch(58% 0.18 38 / 0.06);

  /* Status. refined */
  --green:        oklch(50% 0.12 145);
  --green-soft:   oklch(94% 0.04 145);
  --red:          oklch(54% 0.20 25);
  --blue:         #2A6FE1;
  --blue-soft:    rgba(42, 111, 225, 0.12);

  /* Glass. pure white with high opacity */
  --glass-bg:     rgba(255, 255, 255, 0.85);
}

/* Light-theme body: solid surface, no noise overlay */
[data-theme="light"] body {
  background-image: none;
}

/* Light-theme site-thumb adjustment */
[data-theme="light"] .site-thumb {
  background: linear-gradient(135deg, oklch(96% 0.003 250) 0%, oklch(92% 0.005 250) 100%);
  color: oklch(30% 0.012 240);
}
[data-theme="light"] .site-thumb-content { color: oklch(28% 0.012 240); }
[data-theme="light"] .site-thumb-content em { color: var(--orange); }

/* Light-theme sidebar: uses --topband so it (a) blends with the Safari
   chrome via theme-color on mobile, (b) reads as a subtly warmer "panel"
   sitting next to the neutral page on desktop. */
[data-theme="light"] .side {
  background: var(--topband);
  border-right: 1px solid rgba(0, 0, 0, 0.06);
}
[data-theme="light"] .side-link.is-active {
  background: var(--cream-3);
  color: var(--ink);
}

/* Light-theme. primary button keeps ink dark for crisp contrast on white */
[data-theme="light"] .btn-primary {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
[data-theme="light"] .btn-primary:hover {
  background: var(--ink-2);
  border-color: var(--ink-2);
}

/* Light-theme. diamond-rosette hero stays orange but slightly deeper */
[data-theme="light"] .home-mark-svg { fill: var(--orange); }

/* Light-theme. modals / glass elements pure white */
[data-theme="light"] .cmdk-modal {
  background: #FFFFFF;
  box-shadow: 0 24px 64px rgba(15, 25, 50, 0.10), 0 0 0 1px var(--hairline);
}

[data-theme="light"] .cmdk-backdrop {
  background: rgba(15, 25, 50, 0.32);
}

[data-theme="light"] .mobile-nav {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
}

[data-theme="light"] .dash-toast {
  background: var(--ink);
  color: #fff;
}

/* Legacy hex fallback for browsers without OKLCH support.
   Dark base + light override — mirrors the OKLCH block above. */
@supports not (color: oklch(0% 0 0)) {
  :root {
    --cream:        #1F1611;
    --cream-2:      #2A1F17;
    --cream-3:      #36281E;
    --hairline:     rgba(245, 245, 245, 0.10);
    --hairline-2:   rgba(245, 245, 245, 0.18);
    --hairline-3:   rgba(245, 245, 245, 0.28);
    --orange:       #E26A39;
    --orange-deep:  #C8521E;
    --orange-soft:  #EE8E60;
    --orange-wash:  rgba(226, 106, 57, 0.14);
    --ink:          #F5F5F5;
    --ink-2:        #ECECEC;
    --ink-mute:     #B6A99A;
    --ink-soft:     #998C7E;
    --ink-faint:    #786C61;
    --green:        #87B084;
    --green-soft:   #2C3F2C;
    --red:          #E26A39;
    --blue:         #8FB7C8;
    --blue-soft:    #213340;
    --paper:        #2A1F17;
    --bone:         #2D2218;
  }
  [data-theme="light"] {
    --cream:        #F8F9FB;
    --cream-2:      #F1F3F6;
    --cream-3:      #E6E9ED;
    --hairline:     rgba(15, 25, 50, 0.10);
    --hairline-2:   rgba(15, 25, 50, 0.16);
    --hairline-3:   rgba(15, 25, 50, 0.24);
    --orange:       #C8511E;
    --orange-deep:  #A8400F;
    --orange-soft:  #E07A4A;
    --orange-wash:  rgba(200, 81, 30, 0.06);
    --ink:          #14181F;
    --ink-2:        #1E232C;
    --ink-mute:     #5B6470;
    --ink-soft:     #79828F;
    --ink-faint:    #A2AAB6;
    --green:        #2E7D5B;
    --green-soft:   #E5F1EC;
    --red:          #C73E2C;
    --blue:         #1E5FB8;
    --blue-soft:    #E5EEF9;
    --paper:        #FFFFFF;
    --bone:         #FCFCFD;
  }
}