/* ==========================================================================
   Intention: design tokens
   Pulled from the original site's CSS (index, archetype and legal pages,
   Aug–Sep 2026) and aligned with the web app (intentionweb/src/web.css)
   where both name the same value. No new hues: every color below either
   existed in the original CSS or is mixed from one that did.

   Legend:  (original)  named token in the original CSS, same value
            (promoted)  hard-coded in the original CSS, now named
            (derived)   new; computed from existing tokens
            app: ...    the web app's name for the same value
   ========================================================================== */

:root {
  /* ---- Color: core palette (original) ---------------------------------- */
  --dusk: #121826;            /* deep blue-ink: the pause before */
  --dusk-2: #1A2334;          /* raised surface on dark */
  --dusk-3: #232E44;          /* borders, chips on dark */
  --paper: #F4F4F0;           /* cool daylight */
  --card: #FFFFFF;
  --ink: #20262E;
  --ink-soft: #5B6573;        /* app: --muted */
  --mist: #97A2B4;            /* muted text on dark */
  --jade: #2F9C7C;            /* grounded */
  --jade-btn: #1B6B53;        /* AA button fill, 6.4:1 with white. app: --jade-action */
  --jade-btn-hover: #166049;  /* app: --jade-hover */
  --jade-soft: #E3F1EB;       /* app: --jade-tint */
  --flood: #C9564A;           /* flooded: semantic only, never decoration */
  --error: #E89A90;           /* error text on dark, 7.9:1 */

  /* ---- Color: promoted from hard-coded values -------------------------- */
  --dusk-grounded: #16261F;   /* (promoted) end of the CTA gradient: dusk, grounded */
  --jade-light: #7FD0B5;      /* (promoted) jade text and accents on dark */
  --on-deep: #E9F5F0;         /* (promoted) jade-tinted white for speech on dark. app: --on-deep */
  --on-dark: #E7ECF3;         /* (promoted) strong text on dark; absorbs #DDE5EE */
  --on-dark-2: #C7CEDA;       /* (promoted) body text on dark */
  --on-dark-3: #AEB8C8;       /* (promoted) quiet text on dark */
  --flood-light: #E08D83;     /* (promoted) flood accents on dark */
  --flood-mist: #F0D9D5;      /* (promoted) vent text on dark */
  --line: #E7E7E1;            /* (promoted) hairline on light. app: --line */
  --line-strong: #E0E0DA;     /* (promoted) table rules */
  --dot-muted: #C2C8D0;       /* (promoted) list bullets on light */
  --surface-2: #FAFAF7;       /* (promoted) striped rows, quiet fills */
  --ph-bg: #FBF3E4;           /* (promoted) placeholder slot, from the legal pages' .ph */
  --ph-line: #E8D5AB;         /* (promoted) */
  --ph-ink: #7A5B1E;          /* (promoted) 6.1:1 on --ph-bg */

  /* ---- Color: alpha steps (derived; replace ~12 ad-hoc rgba values) ---- */
  --jade-a08: rgb(47 156 124 / 0.08);
  --jade-a14: rgb(47 156 124 / 0.14);
  --jade-a30: rgb(47 156 124 / 0.30);
  --jade-a40: rgb(47 156 124 / 0.40);
  --flood-a08: rgb(201 86 74 / 0.08);
  --flood-a25: rgb(201 86 74 / 0.25);
  --dusk-glass: rgb(18 24 38 / 0.88);      /* (original value) sticky header */
  --hairline-dark: rgb(255 255 255 / 0.07); /* (original value) header border */

  /* ---- Gradients (derived; every stop is an existing token) ------------ */
  --grad-grounded: linear-gradient(160deg, var(--dusk) 0%, var(--dusk-grounded) 100%);
  --grad-dawn: linear-gradient(180deg,
      var(--dusk-2) 0%, var(--dusk-3) 20%, var(--ink-soft) 48%,
      var(--mist) 70%, var(--jade-soft) 88%, var(--paper) 100%);

  /* ---- The One Dot mark ------------------------------------------------ */
  /* Speech bubble + one jade dot, from the original header and favicon.   */
  --mark-bubble: path("M23 16 h18 a9 9 0 0 1 9 9 v8 a9 9 0 0 1 -9 9 h-10 l-8 8 v-8 a9 9 0 0 1 -9 -9 v-8 a9 9 0 0 1 9 -9 z");
  --mark-dot: 32px 29px;       /* dot center in the mark's 64-unit box */
  --mark-one-dot: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M23 16 h18 a9 9 0 0 1 9 9 v8 a9 9 0 0 1 -9 9 h-10 l-8 8 v-8 a9 9 0 0 1 -9 -9 v-8 a9 9 0 0 1 9 -9 z' fill='none' stroke='%23FFFFFF' stroke-width='3.4' stroke-linejoin='round' stroke-linecap='round'/%3E%3Ccircle cx='32' cy='29' r='5' fill='%232F9C7C'/%3E%3C/svg%3E");

  /* ---- Typography (original families and roles) ------------------------ */
  --display: 'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif;
  --body: 'Figtree', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --speech: 'Spectral', Georgia, 'Times New Roman', serif; /* the words you'd say */

  --fs-display: clamp(38px, 5.6vw, 76px);  /* (derived) homepage hero only */
  --fs-h1: clamp(34px, 4.4vw, 56px);
  --fs-h2: clamp(26px, 3.4vw, 40px);
  --fs-h2-sm: clamp(24px, 3.2vw, 34px);
  --fs-h3: 19px;
  --fs-h4: 17.5px;
  --fs-lede: 18px;
  --fs-body: 16.5px;
  --fs-speech: 17px;
  --fs-sm: 14.5px;
  --fs-xs: 13px;
  --fs-eyebrow: 12.5px;
  --fs-micro: 11.5px;

  --lh-display: 1.04;          /* (derived) tighter for the larger hero */
  --lh-tight: 1.06;
  --lh-snug: 1.15;
  --lh-speech: 1.5;
  --lh-body: 1.6;

  --tr-display: -0.018em;
  --tr-heading: -0.01em;
  --tr-eyebrow: 0.14em;
  --tr-label: 0.1em;
  --tr-wordmark: 0.22em;

  /* ---- Space (original values, arranged as a scale) -------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 52px;
  --space-10: 64px;
  --space-11: 72px;
  --space-12: 96px;
  --space-13: 128px;          /* (derived) breathing room between story chapters */

  --gutter: 24px;
  --section-y: 96px;
  --wrap: 1120px;             /* homepage */
  --wrap-type: 1040px;        /* archetype pages */
  --wrap-text: 760px;         /* legal, long reading */
  --header-h: 64px;

  /* ---- Radii ----------------------------------------------------------- */
  --radius-xs: 5px;
  --radius-sm: 9px;
  --radius-control: 11px;     /* app: --radius-control */
  --radius-md: 12px;
  --radius: 16px;             /* cards. app: --radius-card */
  --radius-lg: 20px;          /* feature cards */
  --radius-pill: 999px;

  /* ---- Shadows --------------------------------------------------------- */
  --shadow-dark: 0 24px 60px rgb(0 0 0 / 0.35);
  --shadow-light: 0 20px 50px rgb(18 24 38 / 0.18);
  --shadow-soft: 0 4px 14px rgb(18 24 38 / 0.06);  /* app: --shadow */

  /* ---- Focus ----------------------------------------------------------- */
  --focus-color: var(--jade);  /* 5.2:1 on dusk, 3.1:1 on paper */
  --focus-width: 3px;
  --focus-offset: 3px;

  /* ---- Motion (derived: the original had only .15s and .2s) ------------ */
  /* Slow, eased, calm. No curve here overshoots, so nothing can bounce.  */
  --ease-calm: cubic-bezier(0.22, 0.61, 0.36, 1);   /* ease-out for UI */
  --ease-breathe: cubic-bezier(0.37, 0, 0.63, 1);   /* sine in-out for loops */
  --ease-settle: cubic-bezier(0.16, 1, 0.3, 1);     /* long, soft landing */
  --dur-press: 150ms;          /* (original) button press */
  --dur-quick: 200ms;          /* (original) color and border changes */
  --dur-gentle: 600ms;
  --dur-slow: 1200ms;
  --breath-flooded: 5.4s;      /* you, before: quicker, shallower */
  --breath-them: 7.8s;         /* them: a different rhythm */
  --breath-shared: 9s;         /* together */

  /* ---- Layers ---------------------------------------------------------- */
  --z-stage: 0;
  --z-content: 1;
  --z-sticky-cta: 40;
  --z-header: 50;
  --z-skip: 100;
}

@media (max-width: 760px) {
  :root { --section-y: 64px; }
}

@media (max-width: 380px) {
  :root { --gutter: 20px; }
}