/* LifeTLDR — design tokens. THE source of truth for the marketing site.
   Served flat at https://lifetldr.com/tokens.css and linked by index.html,
   privacy.html, terms.html, sms-terms.html and welcome.html.

   Extracted verbatim from the design-system CSS that used to be embedded in
   index.html's bundle, which was the de-facto authority. Before extraction the
   values were hand-copied into five pages carrying "keep them in sync"
   comments; all five were verified byte-identical to this set, so this file is
   a faithful consolidation, not a redefinition.

   404.html deliberately does NOT link this file -- an error page should still
   render if asset serving is what broke. Keep its inlined subset in step with
   the values below.

   These mirror the app's design system (lifetldr-app). Changing a value here
   changes the marketing site only; it does not propagate to the product.
*/

/* LifeTLDR — Color tokens
   Rule #1: brand colors DECORATE (surfaces, fills, illustration, large graphics);
   functional shades COMMUNICATE (text, interactive elements).
   Yellow is scarce and load-bearing: "needs a human" in product, "warmth" in identity.
   All text pairs below meet WCAG 2.2 AA. */

:root {
  /* ---- Blue: informational + interactive ---- */
  --blue-400: #559CD5;  /* Calm Blue (brand) — surfaces, illustration, charts, focus rings — NEVER text */
  --blue-600: #2F6EA5;  /* Action — primary button fills (white text 5.4:1), active icons, logo lettering/border */
  --blue-700: #2B6699;  /* Interactive text — links, text buttons (6.1:1 on white) */
  --blue-50:  #EEF5FB;  /* Mist — summary card bg, info surfaces, hover fills, logo tile field */

  /* ---- Yellow: needs-a-human (product) / warmth (identity) — keep scarce ---- */
  --yellow-400: #FBC348; /* Warm Yellow (brand) — highlight, badges, celebratory accents, smiley — fills/line art only, NEVER text */
  --yellow-50:  #FDF3DC; /* Cream — action-item card background */

  /* ---- Green: handled / confirmed ---- */
  --green-400: #8DBB73;  /* Soft Green (brand) — success fills, large checkmarks, illustration */
  --green-700: #4E7A3A;  /* Confirmed — success text (5.0:1) */

  /* ---- Clay: something went wrong, stated calmly (never alarm-red) ---- */
  --clay-600: #B3543F;   /* Attention — errors + destructive text/icons (4.9:1) */

  /* ---- Neutrals ---- */
  --ink-900:  #22303C;   /* Primary text, deep slate (13.5:1) */
  --gray-600: #59626B;   /* Secondary text (6.2:1) — use instead of #808080 for small type */
  --gray-400: #808080;   /* Muted Gray (brand) — icons >=24px, dividers, disabled — not body text */
  --gray-100: #ECEFF1;   /* Hairline borders, skeleton loaders */
  --paper:    #FBFCFD;   /* App background — a breath off pure white */
  --white:    #FFFFFF;   /* Cards */

  /* ---------- Semantic aliases ---------- */
  --text-primary:    var(--ink-900);
  --text-secondary:  var(--gray-600);
  --text-link:       var(--blue-700);
  --text-success:    var(--green-700);
  --text-error:      var(--clay-600);
  --text-on-action:  var(--white);

  --surface-app:     var(--paper);
  --surface-card:    var(--white);
  --surface-info:    var(--blue-50);      /* Daily TL;DR / info surfaces */
  --surface-action:  var(--yellow-50);    /* Action-item cards */
  --surface-hover:   var(--blue-50);

  --border-hairline: var(--gray-100);
  --divider:         var(--gray-100);

  --action-fill:     var(--blue-600);     /* primary buttons */
  --action-fill-hover: #285F8E;           /* Blue 600 darkened ~8% for hover */
  --focus-ring:      var(--blue-400);

  --highlight:       var(--yellow-400);   /* the signature highlighter swipe */
  --needs-action:    var(--yellow-400);
  --confirmed-fill:  var(--green-400);

  --icon-default:    var(--gray-400);
  --icon-active:     var(--blue-600);
}

/* ---------- Dark mode: "the house after the kids are asleep" ----------
   Deep blue-slate surfaces, Blue lifted to text-safe, Yellow stays a fill,
   saturation muted ~10%. Opt-in via [data-theme="dark"]. */
[data-theme="dark"] {
  --blue-400: #7FB8E3;   /* lifted to text-safe */
  --blue-50:  #22384A;
  --ink-900:  #E8EEF3;
  --gray-600: #A6B0B9;
  --gray-100: #2A3B48;

  --paper:    #16222C;   /* app surface */
  --white:    #1E2C38;   /* cards */

  --text-primary:   #E8EEF3;
  --text-secondary: #A6B0B9;
  --text-link:      #7FB8E3;
  --surface-app:    #16222C;
  --surface-card:   #1E2C38;
  --surface-info:   #22384A;
  --surface-action: #3A3320;
  --border-hairline:#2A3B48;
  --divider:        #2A3B48;
}

/* LifeTLDR — Typography tokens
   Display: Fredoka (roundness bridges logo warmth + UI precision), used with restraint, never < 20px, never paragraphs.
   Body/UI: Atkinson Hyperlegible (built for character recognition — the brand promise as a typeface).
   The logo's hand-lettering is a THIRD voice that never becomes a UI font.
   Use tabular-nums for dates, times, counts so calendar chips align. */

:root {
  --font-display: "Fredoka", system-ui, sans-serif;
  --font-body: "Atkinson Hyperlegible", system-ui, sans-serif;

  /* Font shorthands: weight size/line-height family */
  --text-display:  600 28px/34px var(--font-display); /* Screen titles, daily greeting */
  --text-heading:  500 20px/26px var(--font-display); /* Card group headers ("Needs you", "Handled") */
  --text-body:     400 16px/24px var(--font-body);    /* Summaries, descriptions */
  --text-emphasis: 700 16px/24px var(--font-body);    /* The key fact (the date, the name) */
  --text-label:    700 13px/16px var(--font-body);    /* Chips, badges, section eyebrows (+0.02em) */
  --text-caption:  400 13px/18px var(--font-body);    /* Timestamps, source attribution */

  /* Individual axes (for when shorthand is inconvenient) */
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-bold:    700;

  --tracking-label: 0.02em;
}

/* LifeTLDR — Spacing, shape, elevation tokens
   Space is the product's visual argument: the inbox is dense, LifeTLDR is airy.
   Base unit 8px, fine adjustments at 4px.
   Corner radii echo the logo's roundness. Elevation is soft and RARE:
   a card gets a 1px hairline border OR a whisper shadow — never both, never stacked. */

:root {
  /* Spacing scale (8px base, 4px fine) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;   /* between cards */
  --space-4: 16px;   /* card internal padding */
  --space-6: 24px;   /* page margins (mobile) */
  --space-8: 32px;

  /* Layout */
  --reading-measure: 720px; /* summaries — a reading product, not a dashboard */

  /* Corner radii */
  --radius-button: 10px;
  --radius-card:   12px;
  --radius-hero:   16px;  /* modals + the daily summary card */
  --radius-pill:   999px; /* chips + pills */

  /* Elevation — pick ONE per card */
  --shadow-card: 0 1px 3px rgba(34, 48, 60, 0.08);

  /* Focus */
  --focus-width: 2px;
  --focus-offset: 2px;
}

/* LifeTLDR — Motion tokens
   Motion is calm and brief: 150-250ms, ease-out, opacity + small translate (<=8px).
   No bounces, no parallax, no confetti. Completion earns a single soft check-draw.
   The signature moment is "the distill" (<=600ms). Always honor prefers-reduced-motion. */

:root {
  --ease: cubic-bezier(0.2, 0, 0, 1); /* @kind other */ /* ease-out */
  --duration-fast:    150ms; /* @kind other */
  --duration-base:    200ms; /* @kind other */
  --duration-check:   300ms; /* @kind other */ /* the soft check-draw on completion */
  --duration-distill: 600ms; /* @kind other */ /* the signature distill animation */
  --duration-logo:    700ms; /* @kind other */ /* smiley draws itself (once per session) */
  --translate-max:    8px;
}