/* ═══════════════════════════════════════════════════════════════════
   Lamma — design tokens, ported faithfully from the app's "Ceremony" system.
   Every value is cited to its source line in lib/lamma/.

   The site IS the product's identity, not a riff on it. These are the same
   hexes, the same cadences, the same ornaments — translated to the web.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* The public front door has one shared Blue Linen presentation. Personal
     appearance choices belong to /app; these values come from the generated
     app palette so the two surfaces stay related without sharing preferences. */
  --ground: var(--appearance-blue-linen-ground);
  --card: color-mix(in srgb, var(--appearance-blue-linen-ground) 12%, white);
  --ink: var(--appearance-blue-linen-ink);
  --brand: var(--appearance-blue-linen-accent);
  /* ── Competitor tints (for §1 the collapse only — deliberately off-brand) ── */
  --tint-partiful:  #6C5CE7;
  --tint-signup:    #2D9CDB;
  --tint-whatsapp:  #25D366;
  --tint-splitwise: #5BC580;

  /* ── Type ──────────────────────────────────────────────────────────
     The serif/sans split is the whole look: "That single split is what makes the
     app read as stationery rather than as a dashboard." — ceremony.dart:7-9

     The app uses platform serifs (Iowan / New York / Georgia). Fraunces is the
     closest variable-web analogue and is free. Amiri is the authored-Arabic
     counterpart (lamma_strings.dart authors Arabic deliberately). */
  --font-display: 'Fraunces', 'Iowan Old Style', 'New York', Georgia, 'Times New Roman', serif;
  --font-display-ar: 'Amiri', 'Iowan Old Style', Georgia, serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-body-ar: 'Amiri', 'Geeza Pro', 'Noto Naskh Arabic', serif;
  --font-cjk: 'Noto Serif SC', 'Songti SC', 'STSong', 'Hiragino Mincho ProN', 'Yu Mincho', serif;
  --font-deva: 'Noto Serif Devanagari', 'Devanagari MT', serif;

  /* ── Eyebrow (ceremony.dart:124-129) ─────────────────────────────── */
  --eyebrow-size: 12.5px;
  --eyebrow-weight: 600;
  --eyebrow-tracking: 0.5px;

  /* ── Spacing (ceremony.dart:193, app conventions) ─────────────────── */
  --pad-screen: 22px;        /* screen horizontal padding */
  --pad-section: clamp(64px, 10vh, 120px);  /* between sections */
  --maxw: 1180px;            /* reading width */
  --maxw-prose: 640px;       /* narrow prose */

  /* ── Radii (ceremony.dart:134-145, decor.dart:28-33) ──────────────── */
  --r-card: 24px;
  --r-block: 18px;
  --r-pill: 999px;
  --r-cell: 12px;
  --r-arch-feet: 14px;

  /* ── Motion (motion.dart) ───────────────────────────────────────────
     "Three durations: 160ms quick, 240ms normal, 320ms deliberate." */
  --t-quick: 160ms;
  --t-normal: 240ms;
  --t-deliberate: 320ms;
  --t-entrance: 250ms;       /* StaggeredEntrance (motion.dart:31) */
  --stagger: 45ms;           /* per-item delay (motion.dart:29) */
  --ease: cubic-bezier(.2, 0, 0, 1);   /* ≈ Curves.easeOut */
  --ease-settle: cubic-bezier(.16, 1, .3, 1);  /* ≈ Curves.easeOutCubic (decor.dart Reveal) */
  /* The ceremony's own two curves. Neither is used anywhere else, because
     nothing else in the product is allowed to overshoot. */
  --ease-flap: cubic-bezier(.34, 1.36, .38, 1);   /* paper has momentum: the flap passes true and comes back */
  --ease-draw: cubic-bezier(.22, .96, .28, 1);    /* a card pulled by hand: quick out of the pocket, slow into place */
  --rise: 12px;              /* "12px reads as 'settling in' without feeling sluggish" — motion.dart:53 */

  /* ── Shadows (ceremony.dart:134-145) ────────────────────────────────
     Two-part: tight contact + wide soft, tinted with the event's own colour. */
  --shadow-contact: 0 1px 2px color-mix(in srgb, var(--ink) 5%, transparent);
  --shadow-soft: 0 12px 40px color-mix(in srgb, var(--ink) 8%, transparent);
  /* The shadow a card casts once it is out of the envelope and standing in
     front of it. Its own token because the ceremony is the only thing that
     lifts, and because `--ink` inverts in dark posture — built from --ink it
     rendered as a pale glow under the card instead of a shadow. */
  --shadow-lift: 0 26px 50px -18px color-mix(in srgb, var(--ink) 34%, transparent);

  /* ── Ink levels and rules ───────────────────────────────────────────
     These existed only inside the dark block, so in light posture — the
     default — every one of them was undefined. A `var()` with no fallback
     that names nothing makes the whole declaration invalid, which meant:
     `--ink-soft` and `--ink-faint` fell back to *inherited* colour, so every
     caption, subtitle and meaning line rendered at full ink and the type
     hierarchy was flat; and `--hairline` resolved to nothing, so every
     border, every divider and the outlook slider tracks were transparent.
     The values mirror the app (theme.dart: hairline is onSurface at 0.08
     light, 0.16 dark). */
  /* Both carry real text (captions, the "Draft" marker, footnotes), so
     both clear WCAG AA 4.5:1 on the ground: 76% ≈ 6.0:1, 68% ≈ 4.7:1. At
     62% and 40% they measured 3.99:1 and 2.3:1 (scan, 2026-10-02). */
  --ink-soft: color-mix(in srgb, var(--ink) 76%, transparent);
  --ink-faint: color-mix(in srgb, var(--ink) 68%, transparent);
  --hairline: color-mix(in srgb, var(--ink) 9%, transparent);

  /* A control's track is not a rule between rows: it has to read as a thing
     you can grab, so it carries more presence than --hairline. */
  --track: color-mix(in srgb, var(--ink) 15%, transparent);

  /* ── The primary action ─────────────────────────────────────────────
     `--on-brand` was never defined anywhere, in either posture, so
     the primary button's colour declaration was invalid and the label
     simply inherited — which is why the site's main call to action was dark
     ink in light mode and pale in dark, by accident rather than by choice.

     It could not be fixed by naming a colour: the raw bronze carries white
     at 3.9:1 and near-black at 3.7:1, and both fail AA for text this size.
     So the button takes a deeper step of its own bronze — same hue, no new
     accent — which carries white at about 5.2:1.

     (Design law 4 says primary actions are black. This site has always used
     bronze for them. That is a real divergence and it is the owner's to
     settle; this only makes the existing choice legible.) */
  --on-brand: #FFFFFF;
  --brand-strong: color-mix(in srgb, var(--brand) 78%, #2C1F19);
}

/* ── Dark mode ────────────────────────────────────────────────────────
   The shared front door uses the app's Night Ink palette. */
:root[data-theme="dark"] {
  --ground: var(--appearance-night-ink-ground);
  --card: var(--appearance-night-ink-feature);
  --ink: var(--appearance-night-ink-ink);
  --brand: var(--appearance-night-ink-accent);
  --ink-soft: color-mix(in srgb, var(--ink) 78%, transparent);
  --ink-faint: color-mix(in srgb, var(--ink) 60%, transparent);
  --on-brand: var(--appearance-night-ink-ground);
  --brand-strong: var(--appearance-night-ink-accent);
  --hairline: color-mix(in srgb, var(--ink) 14%, transparent);
  --track: color-mix(in srgb, var(--ink) 20%, transparent);
  --shadow-contact: 0 1px 2px rgba(0,0,0,0.3);
  --shadow-soft: 0 12px 40px rgba(0,0,0,0.4);
  --shadow-lift: 0 26px 50px -18px rgba(0,0,0,0.62);
}