/* ============================================================
   Design Tokens — Ants Genome Explorer
   Inspired by editorial science magazines, natural history
   museums and entomology field journals.
   ============================================================ */

:root {
  /* Color — earth, amber, parchment */
  --color-bg:           #0e0c08;
  --color-bg-elevated:  #15110b;
  --color-surface:      #1a1610;
  --color-surface-2:    #221c14;
  --color-line:         rgba(243, 236, 224, 0.10);
  --color-line-strong:  rgba(243, 236, 224, 0.22);
  --color-text:         #f3ece0;
  --color-text-soft:    #d6cdbe;
  --color-muted:        #8a8174;
  --color-faint:        #5a5448;
  --color-accent:       #d97706;   /* amber, like ant abdomen */
  --color-accent-hot:   #f59e0b;
  --color-accent-deep:  #92400e;
  --color-green:        #5e8a4a;   /* poneroid leaf green */
  --color-red:          #b4452a;   /* formicoid rust */
  --color-parchment:    #e8dcc3;

  /* Type scale — modular 1.250 */
  --font-display: "Fraunces", "Source Han Serif SC", "Noto Serif SC", serif;
  --font-serif:   "Source Serif 4", "Source Serif Pro", "Source Han Serif SC", Georgia, serif;
  --font-mono:    "JetBrains Mono", "SF Mono", Consolas, monospace;

  --fs-xs:   0.75rem;     /* 12 */
  --fs-sm:   0.875rem;    /* 14 */
  --fs-base: 1rem;        /* 16 */
  --fs-md:   1.125rem;    /* 18 */
  --fs-lg:   1.375rem;    /* 22 */
  --fs-xl:   1.75rem;     /* 28 */
  --fs-2xl:  2.25rem;     /* 36 */
  --fs-3xl:  3rem;        /* 48 */
  --fs-4xl:  4rem;        /* 64 */
  --fs-5xl:  5.5rem;      /* 88 */
  --fs-6xl:  8rem;        /* 128 */

  --lh-tight:  0.95;
  --lh-snug:   1.1;
  --lh-base:   1.55;
  --lh-prose:  1.7;

  /* Spacing — 4 / 8 / 12 / 24 / 40 / 64 / 96 / 144 */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  24px;
  --space-5:  40px;
  --space-6:  64px;
  --space-7:  96px;
  --space-8:  144px;

  /* Radius */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* Shadows — warm tinted */
  --shadow-1: 0 2px 8px rgba(0,0,0,.30);
  --shadow-2: 0 12px 36px rgba(0,0,0,.40);
  --shadow-3: 0 32px 80px rgba(0,0,0,.55);
  --shadow-glow: 0 0 60px rgba(217,119,6,.18);

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:  cubic-bezier(0.4, 0, 1, 1);
  --dur-fast: 160ms;
  --dur-base: 320ms;
  --dur-slow: 640ms;
  --dur-scene: 880ms;

  /* Layout */
  --container-max: 1320px;
  --gutter: clamp(20px, 4vw, 56px);
  --reading-max: 68ch;
}