/* ============================================================
   Tokens — single source of truth.
   Every color, font, space, ease in the project flows from here.
   ============================================================ */

:root {
  /* ---------- Color ---------- */
  --color-bg:           #0A0A0A;
  --color-bg-elevated:  #111111;
  --color-text:         #F0EDE6;
  --color-text-muted:   #7A7A7A;
  --color-text-subtle:  #4A4A4A;
  --color-divider:      #1E1E1E;
  --color-brand:        #C2000E;
  --color-brand-hover:  #E0001F;
  --color-overlay:      rgba(10, 10, 10, 0.75);

  /* ---------- Typography ---------- */
  --font-display: "Cormorant Garamond", "GT Sectra", Georgia, "Times New Roman", serif;
  --font-sans:    "Inter", "Söhne", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-cn:      "Noto Sans SC", "Noto Sans TC", "PingFang SC", "PingFang TC", "Microsoft YaHei", var(--font-sans);
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  /* Numeric face — variable serif with proper tabular figures.
     Used everywhere a number sits next to a label or animates. */
  --font-numeric: "Fraunces", "Cormorant Garamond", Georgia, serif;

  /* Type scale — modular, base 16px, ratio ~1.25 */
  --fs-xs:    0.75rem;     /* 12 */
  --fs-sm:    0.875rem;    /* 14 */
  --fs-base:  1rem;        /* 16 */
  --fs-md:    1.25rem;     /* 20 */
  --fs-lg:    1.5rem;      /* 24 */
  --fs-xl:    2rem;        /* 32 */
  --fs-2xl:   3rem;        /* 48 */
  --fs-3xl:   4.5rem;      /* 72 */
  --fs-hero:  clamp(3rem, 8vw, 6.5rem);
  --fs-stat:  clamp(3rem, 7vw, 5.5rem);
  --fs-tag:   clamp(1.75rem, 4.5vw, 3.5rem);

  /* Line-heights */
  --lh-display: 1.08;
  --lh-tight:   1.2;
  --lh-ui:      1.3;
  --lh-body:    1.55;

  /* Tracking */
  --tr-tight:    -0.02em;
  --tr-display:  -0.01em;
  --tr-normal:   0;
  --tr-label:    0.15em;
  --tr-eyebrow:  0.2em;

  /* ---------- Spacing — 8px grid ---------- */
  --space-1:   0.5rem;     /* 8 */
  --space-2:   1rem;       /* 16 */
  --space-3:   1.5rem;     /* 24 */
  --space-4:   2rem;       /* 32 */
  --space-5:   2.5rem;     /* 40 */
  --space-6:   3rem;       /* 48 */
  --space-8:   4rem;       /* 64 */
  --space-10:  5rem;       /* 80 */
  --space-12:  6rem;       /* 96 */
  --space-16:  8rem;       /* 128 */
  --space-24:  12rem;      /* 192 */

  /* Section rhythm — fluid */
  --section-y:    clamp(4rem, 10vw, 8rem);
  --gutter-x:     clamp(1.5rem, 5vw, 6rem);
  --content-max:  1440px;
  --reading-max:  680px;

  /* ---------- Easing curves ---------- */
  --ease-hero:   cubic-bezier(0.65, 0, 0.35, 1);
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-micro:  cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in:     cubic-bezier(0.55, 0, 1, 0.45);

  /* ---------- Durations ---------- */
  --dur-micro:   200ms;
  --dur-short:   400ms;
  --dur-base:    700ms;
  --dur-long:    1100ms;
  --dur-hero:    1400ms;

  /* ---------- Layout chrome ---------- */
  --header-h:        72px;
  --header-h-mobile: 60px;
  --hairline:        1px;

  /* ---------- z-index scale ----------
     Note: do NOT use negative z-index on position:fixed background
     layers. Safari and some mobile browsers render negatively-stacked
     fixed elements behind the document's background-color, which hides
     them entirely. The .hero-bg layer uses z-index 0 and content uses
     z-index 1+ so the layering is portable across every browser. */
  --z-bg:        0;
  --z-content:   1;
  --z-header:   50;
  --z-overlay:  90;
  --z-modal:   100;
}

@media (max-width: 640px) {
  :root {
    --fs-base: 0.9375rem;  /* 15px */
  }
}