/* ============================================================
 * selora-tokens.css — canonical design tokens for Selora
 * Shared by the marketing landing page AND the product webapp.
 * Linear-clean palette; semantic naming.
 *
 * Source of truth: scripts/finance/web/static/selora-tokens.css
 * Mirror (deploy):  /tmp/selora-deploy/selora-tokens.css
 *
 * When you change a token here, regenerate the deploy copy:
 *   cp scripts/finance/web/static/selora-tokens.css /tmp/selora-deploy/
 * ============================================================ */

:root {
  /* ─── Surfaces ─── */
  --bg:           #fafbfc;
  --surface:      #ffffff;
  --surface-2:    #f4f6f9;
  --surface-3:    #eef1f5;

  /* ─── Borders ─── */
  --border:       #e6e9ef;
  --border-soft:  #eef1f5;

  /* ─── Text hierarchy (semantic) ─── */
  --ink:          #0b1220;
  --ink-soft:     #1a2236;
  --muted:        #475569;
  --quiet:        #8a93a3;
  --whisper:      #c6cdd8;

  /* ─── Semantic colors ─── */
  --good:         #0e9f6e;
  --good-bg:      #ecfdf5;
  --good-soft:    rgba(14, 159, 110, 0.06);
  --warn:         #b45309;
  --warn-bg:      #fffbeb;
  --danger:       #b91c1c;
  --danger-bg:    #fef2f2;

  /* ─── Brand / accent (semantic aliases) ─── */
  --brand:        var(--good);
  --accent:       #1e293b;

  /* ─── Typography ─── */
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", system-ui, sans-serif;
  --font-sans:    -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", system-ui, sans-serif;
  --font-serif:   ui-serif, "Tiempos Text", "Charter", "Iowan Old Style", "Georgia", serif;
  --font-mono:    ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;

  /* ─── Border radius scale ─── */
  --r-sm:         6px;
  --r-md:         10px;
  --r-lg:         16px;
  --r-xl:         22px;

  /* ─── Spacing scale (4px rhythm) ─── */
  --space-1:      4px;
  --space-2:      8px;
  --space-3:      12px;
  --space-4:      16px;
  --space-5:      24px;
  --space-6:      32px;
  --space-7:      48px;
  --space-8:      64px;
  --space-9:      96px;
  --space-10:     128px;

  /* ─── Type scale — size paired with line-height ─── */
  /* Pattern: --text-{size}  =  font-size
              --lh-{size}    =  line-height for that size */
  --text-xs:      11px;
  --lh-xs:        1.4;
  --text-sm:      13px;
  --lh-sm:        1.5;
  --text-base:    15px;
  --lh-base:      1.55;
  --text-lg:      17px;
  --lh-lg:        1.55;
  --text-xl:      1.15rem;     /* ~18.4px */
  --lh-xl:        1.4;
  --text-2xl:     1.4rem;      /* ~22.4px */
  --lh-2xl:       1.3;
  --text-3xl:     1.85rem;     /* ~29.6px */
  --lh-3xl:       1.2;
  --text-4xl:     2.4rem;      /* ~38.4px */
  --lh-4xl:       1.12;
  --text-5xl:     clamp(2.4rem, 5.6vw, 4.2rem);   /* hero / display */
  --lh-5xl:       1.05;

  /* ─── Font weights ─── */
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;

  /* ─── Letter spacing ─── */
  --tracking-tight:   -0.025em;   /* big display headlines */
  --tracking-snug:    -0.018em;   /* h2 / h3 */
  --tracking-normal:  0;
  --tracking-mono:    0.14em;     /* mono uppercase tags */
  --tracking-mono-lg: 0.18em;     /* eyebrow / chapter labels */

  /* ─── Legacy aliases (DEPRECATED — for backwards compat) ─── */
  /* These map old webapp token names to the new canonical ones.
     New code should use the canonical names directly. Existing
     pages can keep using these aliases until incrementally updated. */

  /* Text hierarchy (webapp used --text / --text-2 / --text-3) */
  --text:         var(--ink);
  --text-2:       var(--muted);
  --text-3:       var(--quiet);

  /* Semantic colors (webapp used --sem-* family) */
  --sem-good:     var(--good);
  --sem-good-bg:  var(--good-bg);
  --sem-opp:      var(--warn);
  --sem-opp-bg:   var(--warn-bg);
  --sem-attn:     var(--danger);
  --sem-attn-bg:  var(--danger-bg);

  /* Fonts (webapp used --font-data for mono) */
  --font-data:    var(--font-mono);

  /* Radii (webapp used --r as default; landing uses --r-md) */
  --r:            var(--r-md);

  /* Borders (webapp's --border-2 has no semantic equivalent — kept here) */
  --border-2:     #cbd5e1;
}