/* ========================================================================
   Design Tokens — Fizmaa
   Editorial-luxe palette: warm cream, deep ink, terracotta, sage
   ======================================================================== */

:root {
  /* ── Color: Foundations ────────────────────────────────────────────── */
  --cream-50:  #FBF8F1;
  --cream-100: #F7F2E8;
  --cream-200: #EFE7D6;
  --cream-300: #E2D6BD;
  --cream-400: #C9B894;

  --ink-50:    #F4F2EE;
  --ink-100:   #D9D5CD;
  --ink-200:   #A8A29A;
  --ink-300:   #6B665E;
  --ink-400:   #3D3A35;
  --ink-500:   #1E1B17;
  --ink-600:   #11100D;

  /* ── Color: Brand ──────────────────────────────────────────────────── */
  --clay-50:   #FCEFE6;
  --clay-100:  #F7DAC4;
  --clay-300:  #E89A6E;
  --clay-500:  #C2530C;
  --clay-600:  #9F3F08;
  --clay-700:  #7A2F05;

  --sage-50:   #EEF1E7;
  --sage-300:  #A8B591;
  --sage-500:  #6B7F5A;
  --sage-700:  #455540;

  --gold-300:  #DCC18B;
  --gold-500:  #B89456;
  --gold-700:  #856830;

  --plum-500:  #6B3A52;
  --rose-100:  #F5E0E0;
  --rose-500:  #B85A6A;

  /* Semantic */
  --success: #4F7A4A;
  --warning: #B88A2B;
  --danger:  #B23A3A;
  --info:    #5B7894;

  /* ── Surface ───────────────────────────────────────────────────────── */
  --bg:           var(--cream-50);
  --bg-soft:      var(--cream-100);
  --bg-warm:      var(--cream-200);
  --surface:      #FFFFFF;
  --surface-2:    var(--cream-50);
  --surface-ink:  var(--ink-500);

  /* ── Text ──────────────────────────────────────────────────────────── */
  --text:         var(--ink-500);
  --text-muted:   var(--ink-300);
  --text-subtle:  var(--ink-200);
  --text-inverse: var(--cream-50);

  /* ── Borders ───────────────────────────────────────────────────────── */
  --border:       rgba(30, 27, 23, 0.08);
  --border-strong:rgba(30, 27, 23, 0.16);
  --border-warm:  rgba(194, 83, 12, 0.18);

  /* ── Typography ────────────────────────────────────────────────────── */
  --font-display: "Fraunces", "Cormorant Garamond", Georgia, serif;
  --font-sans:    "Outfit", "Geist", "Helvetica Neue", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", "SFMono-Regular", ui-monospace, monospace;

  --text-2xs:  0.6875rem;   /* 11 */
  --text-xs:   0.75rem;     /* 12 */
  --text-sm:   0.875rem;    /* 14 */
  --text-base: 1rem;        /* 16 */
  --text-md:   1.0625rem;   /* 17 */
  --text-lg:   1.25rem;     /* 20 */
  --text-xl:   1.5rem;      /* 24 */
  --text-2xl:  1.875rem;    /* 30 */
  --text-3xl:  2.5rem;      /* 40 */
  --text-4xl:  3.5rem;      /* 56 */
  --text-5xl:  4.75rem;     /* 76 */
  --text-6xl:  6.5rem;      /* 104 */

  --leading-tight:  1.08;
  --leading-snug:   1.25;
  --leading-normal: 1.5;
  --leading-relaxed:1.7;

  /* ── Spacing scale (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:  56px;
  --space-10: 72px;
  --space-11: 96px;
  --space-12: 128px;

  /* ── Radius ────────────────────────────────────────────────────────── */
  --radius-xs:  4px;
  --radius-sm:  8px;
  --radius-md:  12px;
  --radius-lg:  18px;
  --radius-xl:  24px;
  --radius-2xl: 36px;
  --radius-full: 999px;

  /* ── Shadow (warm-tinted for depth) ────────────────────────────────── */
  --shadow-xs: 0 1px 2px rgba(30,27,23,0.04);
  --shadow-sm: 0 1px 2px rgba(30,27,23,0.04), 0 2px 6px rgba(30,27,23,0.04);
  --shadow-md: 0 4px 8px rgba(30,27,23,0.05), 0 8px 24px rgba(30,27,23,0.06);
  --shadow-lg: 0 8px 16px rgba(30,27,23,0.06), 0 24px 48px rgba(30,27,23,0.09);
  --shadow-xl: 0 16px 32px rgba(30,27,23,0.08), 0 36px 72px rgba(30,27,23,0.12);
  --shadow-warm: 0 12px 36px rgba(194, 83, 12, 0.18);

  /* ── Motion ────────────────────────────────────────────────────────── */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0.05, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --dur-fast:  140ms;
  --dur-base:  240ms;
  --dur-slow:  420ms;
  --dur-page:  640ms;

  /* ── Layout ────────────────────────────────────────────────────────── */
  --container:    1280px;
  --container-wide: 1440px;
  --nav-h:        72px;
  --sidebar-w:    264px;

  /* ── Grain & texture overlays ──────────────────────────────────────── */
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.12  0 0 0 0 0.10  0 0 0 0 0.08  0 0 0 0.6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.4'/></svg>");
}

/* ── Dark scheme support (preview/limited) ────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root[data-allow-dark="true"] {
    --bg:           #14110D;
    --bg-soft:      #1B1813;
    --bg-warm:      #221E18;
    --surface:      #211D17;
    --surface-2:    #1A1712;
    --text:         #F2EBDD;
    --text-muted:   #B8AE9D;
    --text-subtle:  #6F6859;
    --border:       rgba(242, 235, 221, 0.08);
    --border-strong:rgba(242, 235, 221, 0.16);
  }
}