/* ─────────────────────────────────────────────────────────
   StaticOwl — Design Tokens
   Light-mode first (content editors prefer light).
   Dark variant overrides via [data-theme="dark"].
   ───────────────────────────────────────────────────────── */

:root, [data-theme="light"] {
  /* ─── Surfaces ─────────────────────────────────────────── */
  --c-bg:            #FAF8F4;      /* warm cream */
  --c-surface:       #FFFFFF;
  --c-surface-2:     #F5F1E9;
  --c-surface-3:     #EDE7D9;
  --c-overlay:       rgba(26, 24, 22, 0.5);

  /* ─── Ink (text) ───────────────────────────────────────── */
  --c-ink:           #1A1816;      /* warm near-black */
  --c-ink-2:         #3A3632;
  --c-ink-3:         #6A645D;
  --c-ink-4:         #9A928A;
  --c-ink-muted:     #B8B0A5;

  /* ─── Lines / borders ──────────────────────────────────── */
  --c-line:          #E8E2D6;
  --c-line-2:        #F0EBE0;
  --c-line-strong:   #D4CDC0;

  /* ─── Semantic colors ──────────────────────────────────── */
  --c-accent:        #5A7D4D;      /* leaf green — brand */
  --c-accent-2:      #88A86E;      /* mint — secondary */
  --c-accent-soft:   #E8F0DF;
  --c-accent-ink:    #3A5631;

  --c-ai:            #7C3AED;      /* violet — AI surface */
  --c-ai-2:          #A78BFA;
  --c-ai-soft:       #F3EEFF;
  --c-ai-ink:        #5B21B6;

  --c-warn:          #D97706;      /* amber */
  --c-warn-soft:     #FEF3C7;
  --c-danger:        #DC2626;
  --c-danger-soft:   #FEE2E2;
  --c-info:          #2563EB;
  --c-info-soft:     #DBEAFE;
  --c-ok:            #059669;
  --c-ok-soft:       #D1FAE5;

  /* ─── Typography ───────────────────────────────────────── */
  --font-display:    'Fraunces', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --font-ui:         'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono:       'JetBrains Mono', 'SF Mono', 'Cascadia Code', 'Fira Code', monospace;

  --fs-xs:           0.72rem;
  --fs-sm:           0.82rem;
  --fs-base:         0.94rem;
  --fs-md:           1.02rem;
  --fs-lg:           1.15rem;
  --fs-xl:           1.4rem;
  --fs-2xl:          1.75rem;
  --fs-3xl:          2.25rem;
  --fs-4xl:          3rem;

  --lh-tight:        1.15;
  --lh-snug:         1.35;
  --lh-normal:       1.55;
  --lh-loose:        1.75;

  --fw-regular:      400;
  --fw-medium:       500;
  --fw-semibold:     600;
  --fw-bold:         700;
  --fw-black:        800;

  /* ─── Spacing (4px scale) ──────────────────────────────── */
  --s-0:             0;
  --s-1:             4px;
  --s-2:             8px;
  --s-3:             12px;
  --s-4:             16px;
  --s-5:             20px;
  --s-6:             24px;
  --s-8:             32px;
  --s-10:            40px;
  --s-12:            48px;
  --s-16:            64px;
  --s-20:            80px;

  /* ─── Radii ────────────────────────────────────────────── */
  --r-sm:            4px;
  --r:               8px;
  --r-md:            10px;
  --r-lg:            14px;
  --r-xl:            20px;
  --r-full:          9999px;

  /* ─── Shadows (warm) ───────────────────────────────────── */
  --sh-xs:           0 1px 0 rgba(26, 24, 22, 0.03);
  --sh-sm:           0 1px 2px rgba(26, 24, 22, 0.05), 0 1px 3px rgba(26, 24, 22, 0.04);
  --sh:              0 2px 4px rgba(26, 24, 22, 0.05), 0 4px 12px rgba(26, 24, 22, 0.06);
  --sh-md:           0 4px 6px rgba(26, 24, 22, 0.06), 0 8px 24px rgba(26, 24, 22, 0.08);
  --sh-lg:           0 8px 16px rgba(26, 24, 22, 0.08), 0 16px 40px rgba(26, 24, 22, 0.10);
  --sh-xl:           0 20px 48px rgba(26, 24, 22, 0.14);
  --sh-focus:        0 0 0 3px rgba(90, 125, 77, 0.25);

  /* ─── Transitions ──────────────────────────────────────── */
  --t-fast:          120ms cubic-bezier(0.2, 0.8, 0.2, 1);
  --t:               200ms cubic-bezier(0.2, 0.8, 0.2, 1);
  --t-slow:          340ms cubic-bezier(0.2, 0.8, 0.2, 1);

  /* ─── Layout sizes ─────────────────────────────────────── */
  --nav-w:           240px;
  --nav-w-collapsed: 56px;
  --drawer-w:        360px;
  --header-h:        56px;
  --max-content:     1120px;

  /* ─── Z ────────────────────────────────────────────────── */
  --z-nav:           10;
  --z-drawer:        20;
  --z-header:        30;
  --z-palette:       50;
  --z-modal:         60;
  --z-toast:         70;
}

[data-theme="dark"] {
  --c-bg:            #14130F;
  --c-surface:       #1C1A16;
  --c-surface-2:     #252119;
  --c-surface-3:     #302B20;
  --c-overlay:       rgba(0, 0, 0, 0.7);

  --c-ink:           #F2EEE2;
  --c-ink-2:         #D5CFBF;
  --c-ink-3:         #9A9385;
  --c-ink-4:         #6E685B;
  --c-ink-muted:     #4A463E;

  --c-line:          #302B20;
  --c-line-2:        #252119;
  --c-line-strong:   #433E30;

  --c-accent:        #9FC28C;
  --c-accent-2:      #CBD9B2;
  --c-accent-soft:   rgba(159, 194, 140, 0.12);
  --c-accent-ink:    #CBD9B2;

  --c-ai:            #A78BFA;
  --c-ai-2:          #C4B5FD;
  --c-ai-soft:       rgba(167, 139, 250, 0.14);
  --c-ai-ink:        #C4B5FD;

  --c-warn:          #FBBF24;
  --c-warn-soft:     rgba(251, 191, 36, 0.12);
  --c-danger:        #F87171;
  --c-danger-soft:   rgba(248, 113, 113, 0.12);
  --c-info:          #60A5FA;
  --c-info-soft:     rgba(96, 165, 250, 0.12);
  --c-ok:            #34D399;
  --c-ok-soft:       rgba(52, 211, 153, 0.12);

  --sh-xs:           0 1px 0 rgba(0, 0, 0, 0.3);
  --sh-sm:           0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.25);
  --sh:              0 2px 4px rgba(0, 0, 0, 0.3), 0 4px 12px rgba(0, 0, 0, 0.35);
  --sh-md:           0 4px 6px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.5);
  --sh-lg:           0 8px 16px rgba(0, 0, 0, 0.4), 0 16px 40px rgba(0, 0, 0, 0.6);
  --sh-xl:           0 20px 48px rgba(0, 0, 0, 0.7);
  --sh-focus:        0 0 0 3px rgba(159, 194, 140, 0.35);
}