/* ============================================================
   Lighthouse — DESIGN TOKENS (colors and sizes)
   This is the ONE place to change colors and sizes on the page.
   Edit a value below, save, and refresh the page.
   Keep this file in the same folder as index.html.
   The rules behind these values are in design.md (main folder).
   ============================================================ */

:root{

  /* ---------- DARK SECTIONS ---------- */
  --night:#06100B;          /* base of all dark sections, page background */
  --wave:#1E3B2E;           /* soft diagonal light bands on dark */
  --wave-soft:#2A4A3B;      /* brightest part of a wave, used sparingly */
  --line-dark:rgba(255,255,255,0.10);   /* borders on dark */
  --line-dark-strong:rgba(255,255,255,0.18);  /* pill outline on the program-map cards */
  --card-dark-fill:rgba(255,255,255,0.04);    /* program-map card fill on dark */
  --grain-opacity:0.09;     /* strength of the fine grain over dark sections */

  /* ---------- TEXT ON DARK ---------- */
  --snow:#EDEFEC;                       /* headlines, wordmark, body on dark */
  --snow-muted:rgba(237,239,236,0.66);  /* labels, secondary text on dark */
  --snow-card-text:rgba(237,239,236,0.72);  /* text on the program-map cards */
  --snow-body:rgba(237,239,236,0.78);   /* paragraphs on dark, footer link */

  /* ---------- LIGHT SECTIONS AND CARDS ---------- */
  --white:#FFFFFF;          /* cards, inputs, pill buttons on dark */
  --mist:#EEF0EE;           /* light section (island) background */
  --signup-card:#F7F8F7;    /* the white card that holds the signup form */
  --line-light:#DCE1DD;     /* borders on light */

  /* ---------- TEXT ON LIGHT ---------- */
  --ink:#101A15;            /* headlines and main text on light */
  --ink-body:#2E3833;       /* paragraphs on light */
  --ink-muted:#4A5550;      /* labels, secondary text on light */
  --ink-subtle:#5F6A64;     /* card captions, form note, placeholders */

  /* ---------- PRIMARY BUTTON ON LIGHT (light at top, dark at bottom) ---------- */
  --forest:#1F3A2E;         /* bottom of the button gradient, the "you choose" road */
  --forest-light:#3E5E4F;   /* top of the button gradient, focus outline on light */

  /* ---------- TWO-ROADS DIAGRAM ---------- */
  --road-muted:#7C8782;     /* the dashed "on track" road */
  /* The rocks at the end of the "on track" road: grays that already exist above */
  --rock-dark:var(--ink-subtle);
  --rock-mid:var(--road-muted);
  --rock-light:var(--line-light);
  /* The ONE yellow on the whole page: the light of the little lighthouse. Nowhere else. */
  --lighthouse-light:#F3DE9C;

  /* ---------- HINGE-POINT CARDS: the only other colors outside the palette ---------- */
  --hinge-1:#3E4E66;
  --hinge-2:#7A4746;
  --hinge-3:#75582A;
  --hinge-4:#4A5A3C;
  --hinge-5:#483550;
  --hinge-label:rgba(255,255,255,0.85);   /* label text on the colored blocks */

  /* ---------- SHADOWS ---------- */
  --shadow-card:0 1px 2px rgba(6,16,11,0.04), 0 12px 32px rgba(6,16,11,0.10);       /* manuscript cards */
  --shadow-card-soft:0 1px 2px rgba(6,16,11,0.04), 0 12px 32px rgba(6,16,11,0.06);  /* "won't do", hinge and research cards */
  --shadow-dark:0 24px 60px rgba(0,0,0,0.45);                                        /* signup card and writing screen on dark */

  /* ---------- FONTS ---------- */
  --font-serif:"Source Serif 4",Georgia,serif;
  --font-sans:"Geist",system-ui,sans-serif;

  /* ---------- TYPE SIZES ---------- */
  --fs-h1:clamp(40px,6vw,64px);
  --fs-h2:clamp(30px,4.2vw,44px);
  --fs-h2-signup:clamp(30px,4vw,40px);
  --fs-quote:clamp(22px,2.6vw,30px);
  --fs-body:17px;
  --fs-card-quote:19px;       /* italic excerpt on the example-draft cards */
  --fs-card-title:21px;       /* lead line on the "won't do" cards */
  --fs-hinge-title:20px;
  --fs-research-title:20px;
  --fs-research-line:14.5px;
  --fs-map-heading:clamp(24px,3vw,32px);
  --fs-map-title:21px;
  --fs-step-line:14.5px;
  --fs-preview-prompt:clamp(20px,2.4vw,24px);
  --fs-preview-text:16px;
  --fs-wordmark:22px;
  --fs-wordmark-footer:18px;
  --fs-wordmark-bar:16px;     /* "Lighthouse" in the writing-screen title bar */
  --fs-button:15px;
  --fs-card-body:15px;
  --fs-small:14px;            /* top-bar button, hinge-card line, error message */
  --fs-note:13px;             /* privacy note, form labels, footer link, writing-screen bar */
  --fs-label:12.5px;
  --fs-attribution:12px;      /* founder attribution, day pills */
  --lh-body:1.6;
  --lh-h1:1.08;
  --lh-h2:1.12;
  --lh-quote:1.38;
  --lh-preview-text:1.75;

  /* Text inside the diagram (drawn in diagram units, which scale with the page width) */
  --fs-road-today:15px;
  --fs-road-small:13px;
  --fs-road-title:19px;
  /* The phone version of the diagram is drawn smaller, so its text is a bit bigger in diagram units */
  --fs-road-today-narrow:18px;
  --fs-road-small-narrow:16px;
  --fs-road-title-narrow:22px;

  /* ---------- DIAGRAM LINES ---------- */
  --road-stroke:2.5px;        /* the "you choose" road */
  --road-stroke-muted:2px;    /* the dashed "on track" road */
  --road-stroke-line:1.5px;   /* outline of the lighthouse */
  --road-dash:6 8;            /* dash and gap of the "on track" road */

  /* ---------- SPACING AND WIDTHS ---------- */
  --pad-x:clamp(20px,4vw,40px);              /* side padding inside sections */
  --island-gutter:clamp(10px,2vw,24px);      /* space between a light island and the screen edge */
  --section-pad:clamp(56px,8vw,96px);        /* standard section top/bottom space */
  --section-pad-tight:clamp(56px,8vw,88px);
  --dark-pad:clamp(80px,10vw,128px);         /* founder quote and signup top/bottom space */
  --dark-pad-how:clamp(80px,10vw,112px);
  --hero-pad-top:clamp(72px,10vw,128px);
  --block-gap:88px;                          /* space between blocks inside one light island */
  --block-gap-lg:96px;                       /* before the research section */
  --block-gap-sm:72px;                       /* before "Why both" */
  --preview-pad-bottom:72px;                 /* under the writing screen */
  --icon-size:14px;

  --w-nav:1200px;
  --w-hero:760px;
  --w-text:620px;       /* standard text column */
  --w-wide:900px;       /* example drafts, "won't do" cards, diagram */
  --w-roads-narrow:460px;   /* the phone version of the diagram never grows wider than this */
  --w-research:960px;
  --w-cards:1120px;     /* hinge-point cards */
  --w-map:1040px;       /* program map */
  --w-preview:880px;    /* writing screen */
  --w-leave:640px;
  --w-founder:720px;
  --w-signup:480px;

  /* ---------- MOTION (all of it is switched off for "reduce motion") ---------- */
  --drift-distance:40px;      /* how far a wave band slides at the middle of its cycle */
  --drift-dim:0.8;            /* a wave band dims to this opacity at the middle of its cycle (1 = no dimming) */
  --reveal-distance:16px;     /* blocks rise this far as they fade in */
  --reveal-duration:600ms;
  --lift-distance:4px;        /* cards rise this far on hover */
  --lift-duration:200ms;
  --stagger-step:150ms;       /* program-map cards appear this far apart */
  --type-char-delay:35ms;     /* writing screen: time per letter */
  --type-sentence-pause:400ms;/* writing screen: extra pause after a full stop */
  --type-start-delay:500ms;   /* writing screen: wait before the first letter */
  --caret-blink:1.1s;         /* one blink of the cursor */
  --caret-blinks:6;           /* the cursor blinks this many times when typing ends, then stays solid */
  /* Two-roads drawing (about 2.5 seconds in all). Only the lines move; everything else is still. */
  --draw-trunk:900ms;         /* the green line draws from "Today" to the lighthouse */
  --draw-roads:1600ms;        /* then both roads draw at once from the lighthouse: the dashed one to the rocks, the green one to "The future you choose" */

  /* ---------- SHAPE ---------- */
  --r-card:16px;
  --r-island:24px;
  --r-input:12px;       /* inputs and the form button */
  --r-save:10px;        /* the "Save" label in the writing screen */
  --r-pill:999px;
}