/* ==================================================================
   TrendZion design tokens: the one place for color, type, space,
   lines, radii and motion. Illustration colors are the same values the
   art system uses (art/TRENDZION_ART_SYSTEM.md), so the interface and
   the word plates share one palette.
   ================================================================== */

:root {
  /* --- Surfaces & ink ------------------------------------------- */
  --tz-paper:        #F5EEDC;   /* page */
  --tz-surface:      #FBF7EC;   /* cards, panels */
  --tz-plate:        #F1E8D3;   /* illustration field (fixed in dark mode too) */
  --tz-ink:          #1E1A14;   /* primary text, outlines */
  --tz-ink-2:        #4A4033;   /* secondary text */
  --tz-muted:        #6F634B;   /* metadata (4.8:1 on paper) */
  --tz-line:         rgba(30, 26, 20, 0.14);   /* dividers, card borders */
  --tz-line-strong:  #1E1A14;                 /* selected / emphasized */

  /* --- Illustration & brand palette ------------------------------ */
  --tz-ochre:        #C9962F;
  --tz-indigo:       #2F4A78;
  --tz-terracotta:   #C2603F;
  --tz-sage:         #8C9F74;
  --tz-sky:          #A9C4CF;
  --tz-sand:         #E3C9A3;

  /* --- Interaction ------------------------------------------------ */
  --tz-accent:       #2F4A78;                          /* links, selection */
  --tz-accent-text:  #8A6414;                          /* ochre, darkened for text contrast */
  --tz-select-bg:    rgba(47, 74, 120, 0.08);
  --tz-hover-bg:     rgba(30, 26, 20, 0.04);
  --tz-focus:        #2F4A78;

  /* --- Semantic ---------------------------------------------------- */
  --tz-rise:         #2D7A3A;
  --tz-decline:      #B23A22;
  --tz-warning:      #9A6A12;
  --tz-error:        #B23A22;
  --tz-success:      #2D7A3A;

  /* --- Type ---------------------------------------------------------
     Two families: Fraunces (editorial display) + IBM Plex Sans (UI,
     body, charts). Hierarchy comes from size, spacing and case, not
     weight alone. */
  --tz-font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --tz-font-ui:      "IBM Plex Sans", -apple-system, "Segoe UI", "Helvetica Neue", sans-serif;

  --tz-display-size: clamp(36px, 5.2vw, 56px);  --tz-display-lh: 1.04;
  --tz-h1-size:      clamp(30px, 4vw, 40px);    --tz-h1-lh: 1.1;
  --tz-h2-size:      clamp(24px, 3vw, 30px);    --tz-h2-lh: 1.15;
  --tz-h3-size:      20px;                      --tz-h3-lh: 1.25;
  --tz-word-size:    18px;                      --tz-word-lh: 1.2;
  --tz-body-lg-size: 18px;                      --tz-body-lg-lh: 1.55;
  --tz-body-size:    16px;                      --tz-body-lh: 1.55;
  --tz-label-size:   12px;  --tz-label-track: 0.12em;
  --tz-meta-size:    13px;                      --tz-meta-lh: 1.4;
  --tz-caption-size: 12px;                      --tz-caption-lh: 1.4;
  --tz-button-size:  14px;

  /* --- Space (4px base) -------------------------------------------- */
  --tz-space-1: 4px;
  --tz-space-2: 8px;
  --tz-space-3: 12px;
  --tz-space-4: 16px;
  --tz-space-5: 24px;
  --tz-space-6: 32px;
  --tz-space-7: 48px;
  --tz-space-8: 64px;
  --tz-space-9: 96px;

  /* --- Lines, radii, depth ----------------------------------------- */
  --tz-border:        1px;
  --tz-border-strong: 2px;
  --tz-radius-sm:     4px;
  --tz-radius:        8px;
  --tz-radius-lg:     12px;
  --tz-shadow-lift:   0 6px 18px rgba(30, 26, 20, 0.10);   /* only for floating UI */

  /* --- Motion -------------------------------------------------------- */
  --tz-dur-fast: 150ms;
  --tz-dur:      220ms;
  --tz-ease:     cubic-bezier(0.2, 0.7, 0.2, 1);
}

[data-theme="dark"] {
  --tz-paper:        #0E1116;
  --tz-surface:      #161B22;
  /* --tz-plate stays light: the illustrations read as printed plates. */
  --tz-ink:          #EDEAE3;
  --tz-ink-2:        rgba(237, 234, 227, 0.82);
  --tz-muted:        rgba(237, 234, 227, 0.60);
  --tz-line:         rgba(255, 255, 255, 0.12);
  --tz-line-strong:  #EDEAE3;
  --tz-accent:       #8BA8D4;
  --tz-accent-text:  #E0B55A;
  --tz-select-bg:    rgba(139, 168, 212, 0.14);
  --tz-hover-bg:     rgba(255, 255, 255, 0.05);
  --tz-focus:        #8BA8D4;
  --tz-rise:         #5DBB6E;
  --tz-decline:      #E0715A;
  --tz-shadow-lift:  0 6px 18px rgba(0, 0, 0, 0.45);
}

@media (prefers-reduced-motion: reduce) {
  :root { --tz-dur-fast: 0ms; --tz-dur: 0ms; }
}