/* ============================================================
   LOOPZ MARKETING WEBSITE — DESIGN TOKENS
   Ported from docs/website-design/tokens/ (Lithic-inspired
   restyle of Loopz: white ground, near-black ink, Loopz indigo
   as the working primary, deepOrange as a sparing callout
   accent, no gradients). Fonts load via <link> in layout.ftl.
   ============================================================ */
:root {
  /* ---------- GROUND ---------- */
  --paper:        #ffffff;
  --paper-raised: #ffffff;
  --paper-sunken: #f5f5f3;
  --ink:          #15161b;
  --ink-raised:   #1e2027;

  /* ---------- BRAND ---------- */
  --primary:       #3f51b5;
  --primary-dark:  #303f9f;
  --primary-light: #7986cb;
  --primary-tint:  #e8eaf6;
  --callout:       #ff5722;
  /* deepOrange 900, not 700: it's used for chip text on --callout-tint, where 700 only
     reaches 3.3:1 contrast (WCAG AA needs 4.5:1 at chip text size). */
  --callout-dark:  #bf360c;
  --callout-tint:  #fbe9e7;

  /* ---------- TEXT ---------- */
  --text-1: #15161b;
  --text-2: rgba(21, 22, 27, 0.64);
  /* 0.62 is the floor for 4.5:1 (WCAG AA) on both --paper and --paper-sunken; the old 0.42
     read at only 2.7:1. Differentiate the faint tier by size/casing, not by going lighter. */
  --text-3: rgba(21, 22, 27, 0.62);
  --text-on-ink-1: #f7f7f5;
  --text-on-ink-2: rgba(247, 247, 245, 0.62);
  --text-on-primary: #ffffff;

  /* ---------- LINES ---------- */
  --hairline:        rgba(21, 22, 27, 0.16);
  --hairline-strong: rgba(21, 22, 27, 0.32);
  --hairline-on-ink: rgba(247, 247, 245, 0.18);

  /* ---------- SEMANTIC ---------- */
  --success:      #2e7d32;
  --success-tint: #e8f5e9;
  --warning:      #8d6e00;
  --warning-tint: #fff8e1;
  --error:        #d32f2f;
  --error-tint:   #ffebee;

  /* ---------- SEMANTIC SURFACES ---------- */
  --surface-page:   var(--paper);
  --surface-card:   var(--paper-raised);
  --surface-invert: var(--ink);
  --text-body:      var(--text-1);
  --text-muted:     var(--text-2);
  --link:           var(--primary);
  --link-hover:     var(--primary-dark);

  /* ---------- TYPE ---------- */
  --font-display: "Space Grotesk", "Helvetica Neue", sans-serif;
  --font-body: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  --fs-display-1: 64px;
  --fs-display-2: 44px;
  --fs-display-3: 30px;
  --fs-title:     21px;
  --fs-body-lg:   18px;
  --fs-body:      16px;
  --fs-body-sm:   14px;
  --fs-caption:   13px;
  --fs-eyebrow:   13px;

  --lh-display: 1.05;
  --lh-title: 1.25;
  --lh-body: 1.55;
  --track-display: -0.02em;
  --track-eyebrow: 0.14em;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* ---------- SPACING (8px base) ---------- */
  --sp-1: 8px;
  --sp-2: 16px;
  --sp-3: 24px;
  --sp-4: 32px;
  --sp-5: 40px;
  --sp-6: 48px;
  --sp-8: 64px;
  --sp-12: 96px;
  --sp-16: 128px;

  /* ---------- LAYOUT ---------- */
  --container-max: 1200px;
  --grid-gap: 24px;

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

  /* ---------- BORDERS ---------- */
  --border-card: 1px solid var(--hairline);
  --border-input: 1px solid var(--hairline-strong);

  /* ---------- SHADOW (rare — dialogs and floating nav only) ---------- */
  --shadow-dialog: 0 12px 40px rgba(21, 22, 27, 0.18);
  --shadow-nav: 0 1px 0 var(--hairline);

  /* ---------- MOTION ---------- */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --duration-fast: 150ms;
  --duration-med: 450ms;
}