/* ============================================================
   Folio UI — Design Tokens
   Built with Claude Code · uisuppli.es
   ============================================================ */

/* ── 1. Light mode defaults ─────────────────────────────────── */
:root,
[data-theme="light"] {

  /* Brand / Accent — sky blue */
  --color-brand-accent:       #1EC1FF;
  --color-brand-accent-2:     #29CCFF;
  --color-brand-accent-deep:  #0284C7;
  --color-brand-accent-soft:  #BAE6FD;

  /* Neutral — warm ink scale */
  --color-neutral-950:  #0A0A09;
  --color-neutral-900:  #1A1A19;
  --color-neutral-800:  #4A4A47;
  --color-neutral-600:  #8A8778;
  --color-neutral-400:  #BFB9A8;
  --color-neutral-200:  #D9D4C2;
  --color-neutral-100:  #E8E4D6;
  --color-neutral-50:   #F0EEE6;

  /* Surfaces */
  --color-surface-base:    #F0EEE6;
  --color-surface-raised:  #E8E4D6;
  --color-surface-overlay: #EAE6D8;
  --color-surface-code:    #18222C;

  /* Text */
  --color-text-primary:   #1A1A19;
  --color-text-secondary: #4A4A47;
  --color-text-tertiary:  #8A8778;
  --color-text-inverse:   #F0EEE6;
  --color-text-accent:    #0284C7;
  --color-text-code:      #F1EEE3;

  /* Borders */
  --color-border-default: #D9D4C2;
  --color-border-strong:  #BFB9A8;
  --color-border-focus:   var(--color-brand-accent);
  --color-border-accent:  rgba(30, 193, 255, 0.35);

  /* Semantic */
  --color-success:        #059669;
  --color-success-subtle: rgba(5, 150, 105, 0.15);
  --color-warning:        #D97706;
  --color-warning-subtle: rgba(217, 119, 6, 0.15);
  --color-error:          #DC2626;
  --color-error-subtle:   rgba(220, 38, 38, 0.15);

  /* Accent-derived interactive tokens */
  --color-surface-action:       var(--color-brand-accent);
  --color-surface-action-hover: var(--color-brand-accent-2);
  --color-surface-action-deep:  var(--color-brand-accent-deep);
  --color-surface-hover-tint:   rgba(30, 193, 255, 0.10);
  --color-surface-hover-tint-2: rgba(30, 193, 255, 0.08);

  /* Badge colours */
  --color-badge-live-bg:    rgba(30, 193, 255, 0.18);
  --color-badge-live-text:  #0284C7;
  --color-badge-demo-bg:    rgba(74, 74, 71, 0.10);
  --color-badge-demo-text:  #4A4A47;
  --color-badge-read-bg:    rgba(30, 193, 255, 0.18);
  --color-badge-read-text:  #0284C7;
  --color-badge-write-bg:   rgba(244, 114, 182, 0.20);
  --color-badge-write-text: #9D174D;
  --color-badge-action-bg:  rgba(234, 179, 8, 0.22);
  --color-badge-action-text:#92400E;

  /* Typography */
  --font-serif:  'Fraunces', Georgia, 'Times New Roman', serif;
  --font-mono:   'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
  --font-pixel:  'Press Start 2P', monospace;
  --font-family-base: var(--font-serif);

  /* Font sizes */
  --text-display:  clamp(44px, 5.4vw, 72px);
  --text-h2:       clamp(22px, 2.6vw, 30px);
  --text-h3:       clamp(18px, 1.9vw, 22px);
  --text-body-lg:  16px;
  --text-body:     15px;
  --text-body-sm:  14px;
  --text-label:    13px;
  --text-caption:  12px;
  --text-micro:    11px;
  --text-pixel:    9px;
  --text-pixel-sm: 8px;

  /* Font weights */
  --weight-light:   300;
  --weight-normal:  400;
  --weight-medium:  500;
  --weight-semi:    600;

  /* Line heights */
  --leading-tight:  1.05;
  --leading-snug:   1.2;
  --leading-normal: 1.45;
  --leading-relaxed:1.6;

  /* Letter spacing */
  --tracking-tight:  -0.025em;
  --tracking-normal: 0em;
  --tracking-wide:   0.04em;
  --tracking-wider:  0.1em;
  --tracking-widest: 0.18em;
  --tracking-pixel:  0.14em;

  /* Spacing — base unit: 4px */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  28px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* Shape — square by default, site uses no border-radius */
  --radius-sm:   0px;
  --radius-md:   0px;
  --radius-lg:   0px;
  --radius-full: 0px;
  --radius-btn:  0px;
  --radius-card: 0px;
  --radius-input:0px;

  /* Elevation — hard ink shadow (no blur) */
  --shadow-sm:  3px 3px 0 0 var(--color-neutral-900);
  --shadow-md:  4px 4px 0 0 var(--color-neutral-900);
  --shadow-lg:  6px 6px 0 0 var(--color-neutral-900);
  --shadow-xl:  8px 8px 0 0 var(--color-neutral-900);
  --shadow-xxl: 12px 12px 0 0 var(--color-neutral-900);
  --shadow-accent: 0 0 0 3px rgba(30, 193, 255, 0.18);

  /* Motion */
  --duration-fast:  80ms;
  --duration-base:  120ms;
  --duration-slow:  280ms;
  --duration-enter: 200ms;
  --easing-default: cubic-bezier(0.4, 0, 0.2, 1);
  --easing-spring:  cubic-bezier(0.18, 0.89, 0.32, 1.18);

  /* Z-index */
  --z-base:     1;
  --z-dropdown: 10;
  --z-sticky:   40;
  --z-overlay:  50;
  --z-modal:    1000;
  --z-toast:    1100;

  /* Breakpoints */
  --breakpoint-xs: 380px;
  --breakpoint-sm: 600px;
  --breakpoint-md: 720px;
  --breakpoint-lg: 760px;
  --breakpoint-xl: 900px;

  /* Scrollbar */
  --scrollbar-width:  10px;
  --scrollbar-track:  var(--color-surface-raised);
  --scrollbar-thumb:  var(--color-neutral-600);
}

/* ── 2. Seed personality overrides (must come BEFORE dark mode) ── */
[data-seed="1"] {
  --color-brand-accent:      #1a1a1a;
  --color-brand-accent-2:    #333333;
  --color-brand-accent-deep: #555555;
  --color-brand-accent-soft: #f0f0f0;
  --radius-btn:   0px;
  --radius-card:  2px;
  --radius-input: 0px;
  --font-family-base: 'Inter', system-ui, sans-serif;
}
[data-seed="2"] {
  --color-brand-accent:      #4f46e5;
  --color-brand-accent-2:    #6366f1;
  --color-brand-accent-deep: #3730a3;
  --color-brand-accent-soft: #e0e7ff;
  --radius-btn:   0px;
  --radius-card:  4px;
  --radius-input: 2px;
  --font-family-base: 'DM Sans', system-ui, sans-serif;
}
[data-seed="3"] {
  --color-brand-accent:      #c2410c;
  --color-brand-accent-2:    #ea580c;
  --color-brand-accent-deep: #9a3412;
  --color-brand-accent-soft: #fff7ed;
  --radius-btn:   0px;
  --radius-card:  2px;
  --radius-input: 0px;
  --font-family-base: 'Lato', system-ui, sans-serif;
}
[data-seed="4"] {
  --color-brand-accent:      #38bdf8;
  --color-brand-accent-2:    #7dd3fc;
  --color-brand-accent-deep: #0284c7;
  --color-brand-accent-soft: #0c2033;
  --radius-btn:   0px;
  --radius-card:  2px;
  --radius-input: 0px;
  --font-family-base: 'Geist', 'Inter', system-ui, sans-serif;
}

/* ── 3. Dark mode (must come LAST to win the cascade) ──────── */
[data-theme="dark"] {
  /* Brand accent — slightly brightened for dark contrast */
  --color-brand-accent:       #1EC1FF;
  --color-brand-accent-2:     #5CD1FF;
  --color-brand-accent-deep:  #38CAFF;
  --color-brand-accent-soft:  rgba(30, 193, 255, 0.15);

  /* Surfaces — warm dark (hue-preserved from cream palette) */
  --color-surface-base:    #1A1710;
  --color-surface-raised:  #221E14;
  --color-surface-overlay: #2A2620;
  --color-surface-code:    #0E1620;

  /* Text */
  --color-text-primary:   #F0EEE6;
  --color-text-secondary: #BFB9A8;
  --color-text-tertiary:  #8A8778;
  --color-text-inverse:   #1A1710;
  --color-text-accent:    #38CAFF;
  --color-text-code:      #C9CAB5;

  /* Borders */
  --color-border-default: #3A3630;
  --color-border-strong:  #504A40;
  --color-border-focus:   var(--color-brand-accent);
  --color-border-accent:  rgba(30, 193, 255, 0.40);

  /* Neutral */
  --color-neutral-50:   #1A1710;
  --color-neutral-100:  #221E14;
  --color-neutral-200:  #3A3630;
  --color-neutral-400:  #504A40;
  --color-neutral-600:  #8A8778;
  --color-neutral-800:  #BFB9A8;
  --color-neutral-900:  #E8E4D6;
  --color-neutral-950:  #F0EEE6;

  /* Interactive */
  --color-surface-action:       var(--color-brand-accent);
  --color-surface-action-hover: var(--color-brand-accent-2);
  --color-surface-hover-tint:   rgba(30, 193, 255, 0.12);
  --color-surface-hover-tint-2: rgba(30, 193, 255, 0.10);

  /* Badges */
  --color-badge-live-bg:    rgba(30, 193, 255, 0.20);
  --color-badge-live-text:  #5CD1FF;
  --color-badge-demo-bg:    rgba(191, 185, 168, 0.12);
  --color-badge-demo-text:  #BFB9A8;
  --color-badge-read-bg:    rgba(30, 193, 255, 0.20);
  --color-badge-read-text:  #38CAFF;
  --color-badge-write-bg:   rgba(244, 114, 182, 0.18);
  --color-badge-write-text: #F9A8D4;
  --color-badge-action-bg:  rgba(251, 191, 36, 0.18);
  --color-badge-action-text:#FCD34D;

  /* Shadow — lighter in dark mode */
  --shadow-sm:  3px 3px 0 0 var(--color-neutral-200);
  --shadow-md:  4px 4px 0 0 var(--color-neutral-200);
  --shadow-lg:  6px 6px 0 0 var(--color-neutral-200);
  --shadow-xl:  8px 8px 0 0 var(--color-neutral-200);
  --shadow-xxl: 12px 12px 0 0 var(--color-neutral-200);
  --shadow-accent: 0 0 0 3px rgba(30, 193, 255, 0.25);
}