/* Digital Dream AI — design tokens.
   Round r2026-08-22-03 replaces the dark-purple foundation canvas with the approved v2 pastel-lilac direction
   (references/01..06 of the Home + Dream Recording handoff). Raw brand values come from the approved moon-loader
   palette; semantic tokens map them to UI roles. Claude Design: extend this file, never hard-code colours in
   components. Contrast receipts for every text pair live in docs/DESIGN_RULES.md. */
:root {
  color-scheme: light;
  /* raw brand values (approved v2 loader + reference palette) */
  --dd-brand-blue: #8fc9de;
  --dd-brand-blue-deep: #5b94ad;
  --dd-brand-violet: #9e84d5;
  --dd-brand-lilac: #cbb8e8;
  --dd-brand-lilac-deep: #6b4cbf;
  --dd-brand-blush: #e9b2cf;
  --dd-brand-gold: #d6a24a;
  --dd-brand-gold-light: #f3d69d;
  --dd-brand-halo: #d8c8f2;
  /* the pale disc that cuts the crescent on Home (reference 01_HOME.svg, #F5F0FB) */
  /* the mic ring's face (reference 01_HOME.svg, #F6F1FC — a shade warmer than the card surface) */
  /* the mic core: the reference paints it with the screen-wide primary ramp, so over the 108 px core it reads as
     this narrow slice of that ramp (measured at x=141..249 of the 24..366 gradient) */
  --dd-mic-core-1: #c8b2f1;
  --dd-mic-core-2: #c3abed;
  --dd-mic-face: #f6f1fc;
  --dd-moon-cut: #f5f0fb;
  --dd-brand-plum: #9279b6;

  /* semantic colour tokens — sRGB first, OKLCH override below */
  --dd-bg: #faf7ff;
  --dd-bg-2: #eee7f8;
  --dd-surface: #fcfafe;
  --dd-on-accent: #ffffff;                              /* ink on accent-filled marks (assure tick) */
  --dd-surface-2: #f1ebf8;
  --dd-border: #d7cbe7;
  --dd-text: #2d2142;
  --dd-text-muted: #5f5273;
  /* the primary CTA is a shallow pastel wash with a dark-plum foreground; deep lilac stays a role, never a fill */
  --dd-primary: #cdb9f4;
  --dd-primary-2: #bda4ea;
  --dd-on-primary: #2d2142;
  --dd-accent: #6b4cbf;
  /* #b75b72 is the reference mark colour: it clears 3:1 as a graphic but not 4.5:1 as copy,
     so error text uses the deeper plum-red and only the icon uses the mark. */
  --dd-error: #a34a60;
  --dd-error-mark: #b75b72;
  /* the soft fill inside the "nothing is blocked" ring (reference 05_HOME_MIC_DENIED.svg) */
  --dd-error-soft: #f5dce4;
  --dd-success: #34796b;
  --dd-focus: #6b4cbf;

  /* app backdrop — the light lilac atmosphere the moon loader is masked over, so shell and loader read as one
     surface. Static by design: an animated backdrop costs main-thread time and puts M-WV-02 (INP) at risk for
     decoration. Washes are restrained on purpose (one lavender, one blush), never a full-screen saturated gradient. */
  --dd-backdrop-base: #faf7ff;
  --dd-backdrop-sheet: #eee7f8;
  /* the reference's two washes, colour and start opacity verbatim (washA #E4D7F6 at .68, washB #F3DDEB at .52) */
  --dd-wash-a: rgba(228, 215, 246, 0.68);
  --dd-wash-b: rgba(243, 221, 235, 0.52);
  --dd-backdrop-wash-1: rgba(228, 215, 246, 0.68);
  --dd-backdrop-wash-2: rgba(243, 221, 235, 0.52);
  --dd-shadow-soft: rgba(146, 121, 182, 0.16);
  --dd-shadow-card: rgba(146, 121, 182, 0.1);
  --dd-sheen: rgba(255, 255, 255, 0.18);

  /* type — system stack at foundation stage; brand faces are chosen in the design stage */
  --dd-font-display: "Avenir Next", "Segoe UI Variable Display", "Helvetica Neue", system-ui, sans-serif;
  --dd-font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --dd-font-mono: ui-monospace, SFMono-Regular, Consolas, monospace;
  --dd-fs-body: 1rem;                                   /* 16px */
  --dd-fs-lead: 0.9375rem;                              /* 15px, capture-screen subtitles (02_CAPTURE_RECORDING) */
  /* DF-47: Home's subtitle is NOT the capture subtitle. 01_HOME.svg draws "Tell it before it fades." at 16 px and
     02_CAPTURE_RECORDING.svg draws "Speak naturally…" at 15 px — two roles that shared one token, so Home rendered a
     step small against its own approved reference. Overridden per subtree in styles/app.css, which also carries the
     skeleton ghost with it: --dd-lede-box below resolves var(--dd-fs-lead) where it is USED, so the reservation and
     the real text stay one number and the F-01 no-shift property survives the change. */
  --dd-fs-lead-home: 1rem;                              /* 16px, Home subtitle (01_HOME) */
  --dd-fs-small: 0.875rem;                              /* 14px, captions only */
  --dd-fs-micro: 0.8125rem;                             /* 13px, meta rows */
  --dd-fs-eyebrow: 0.75rem;                             /* 12px, the brand lockup (reference 01_HOME) */
  /* the card eyebrow is a different size in the references: 11 px with 1.4 px tracking (03_CAPTURE_TRANSCRIPT) */
  --dd-fs-eyebrow-card: 0.6875rem;
  --dd-track-eyebrow-card: 0.127em;
  --dd-fs-read: 1.0625rem;                              /* 17px, transcript reading size */
  /* the references are a fixed 390 design: Home's title is 32 px and every capture screen's is 30 px. Declared in
     rem so a 200% text setting scales them (WCAG Resize Text) without a viewport-driven clamp under-sizing them. */
  --dd-fs-title: 2rem;
  --dd-fs-title-capture: 1.875rem;
  --dd-lh-body: 1.6;
  --dd-lh-read: 1.75;
  --dd-lh-title: 1.2;
  --dd-track-eyebrow: 0.2em;                            /* 2.4px at 12px — the reference's letter-spacing */

  /* space (4/8 scale) and rhythm tiers */
  --dd-s1: 4px; --dd-s2: 8px; --dd-s3: 12px; --dd-s4: 16px;
  --dd-s5: 24px; --dd-s6: 32px; --dd-s7: 48px;

  /* shape */
  --dd-r1: 8px; --dd-r2: 14px; --dd-r3: 20px; --dd-pill: 999px;

  /* motion */
  --dd-dur-micro: 180ms;
  --dd-dur-trans: 320ms;
  --dd-ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  /* Loader reveal (DF-19). The inline loader is a large SVG tree with masks and filters: a paint that lands before
     styles/app.css is applied shows the blobs unclipped at the wrong size (flash of unstyled SVG). The loader starts
     invisible and this delay is the window in which nothing of it is painted; the duration is its fade. Because the
     delay is longer than a fast start, a fast start shows no loader at all instead of a flash. */
  --dd-loader-reveal-delay: 160ms;
  --dd-loader-reveal-dur: 320ms;

  /* control geometry — shared by content and skeleton so the swap never shifts layout */
  /* Home's vertical rhythm, taken box-edge by box-edge from uploads/01_HOME.svg at 390x844. The screens used one
     16 px gap everywhere, which drifted up to 80 px from the reference by the footnote. The skeleton reuses the same
     numbers, so a corresponding role never moves at the swap (F-01). */
  --dd-gap-brand-moon: 28px;
  --dd-gap-moon-title: 35px;
  --dd-gap-title-lede: 6px;
  /* DF-47: 48.4 = the reference's 50 px measured against a 15 px lede, less the 1.6 px the box grew when Home's lede
     took its true 16 px. The reference fixes BOTH the lede baseline (331) and the mic ring top (389); correcting the
     type size without this would have moved every role below the lede down by one line-height difference. */
  --dd-gap-lede-mic: 48.4px;
  --dd-gap-mic-action: 5px;
  --dd-gap-action-cta: 33px;
  --dd-gap-cta-footnote: 35px;
  --dd-control-h: 52px;
  --dd-control-min: 48px;
  --dd-cta-h: 56px;
  --dd-mic-ring: 148px;
  --dd-mic-core: 108px;
  --dd-moon-box: 140px;
  /* One moon, two screens. The loader canvas is 300 units wide and its crescent measures 110 of them (the nested
     svg is 184/300 of the canvas and the moon is r=90 of the nested 300); the Home emblem is a 140-unit box whose
     moon is 92. Sizing the loader canvas at moon-box x 1.7857 renders its crescent at exactly the emblem's 92 px,
     so the moon does not change size when the splash hands over to Home. The centre offset below aligns the two
     centres for the same reason: 0.6548 of the canvas width is the distance from the top of the loader svg to the
     crescent's centre. Both factors are geometry, not taste — TS-39 recomputes them from the markup. */
  --dd-moon-loader-w: calc(var(--dd-moon-box) * 1.7857);
  --dd-moon-loader-centre: calc(var(--dd-moon-loader-w) * 0.3667);
  /* The crescent sits 12.4 canvas units left of the canvas centre while the emblem's moon sits 7 px left of its box
     centre, so the splash canvas is nudged right by the difference. Without it the moon travels 3.3 px sideways at
     the handover — measured, not guessed. */
  --dd-moon-loader-nudge: calc(var(--dd-moon-loader-w) * 0.0132);
  --dd-brand-box: 20px;
  --dd-lede-box: calc(var(--dd-fs-lead) * var(--dd-lh-body));
  /* DF-44: the headline box is a ONE-line floor, not a two-line reservation. The two-line count was the older half of
     the F-01 repair; the other half — the skeleton ghost that lays out the REAL localized string in the real
     typography (index.html .sk__ghost, styles/app.css .sk--title .sk__ghost) — already reserves exactly the number of
     lines the string needs at the actual width, so the fixed count only added a permanent empty line. At 390x844 that
     line pushed Home's whole column 38.4 px below reference 01_HOME.svg (lede baseline 370 instead of 331, mic ring
     top 428 instead of 389) and dropped the legal control past the 844 fold. With an intrinsic box the skeleton and
     the content compute the same height by construction, so TS-08's no-shift property holds WITHOUT the reservation:
     measured 0.0 px per-role delta at 390, 360 and 320 px in EN and DE (round r2026-08-22-05c, Block 1). */
  --dd-title-box: calc(var(--dd-fs-title) * var(--dd-lh-title));
  --dd-body-box: calc(var(--dd-fs-body) * var(--dd-lh-body) * 3);
  --dd-content-w: min(100%, 342px);
}
@supports (color: oklch(0.5 0.1 200)) {
  :root {
    --dd-bg-2: oklch(0.93 0.026 302);
    --dd-surface: oklch(0.99 0.006 300);
    --dd-surface-2: oklch(0.95 0.021 302);
    --dd-border: oklch(0.85 0.036 300);
    --dd-text: oklch(0.26 0.058 303);
    --dd-text-muted: oklch(0.45 0.048 303);
    --dd-primary: oklch(0.81 0.083 300);
    --dd-primary-2: oklch(0.75 0.093 297);
    --dd-on-primary: oklch(0.26 0.058 303);
    --dd-accent: oklch(0.48 0.174 293);
    --dd-error: oklch(0.47 0.115 5);
    --dd-error-mark: oklch(0.54 0.109 5);
    --dd-success: oklch(0.48 0.062 178);
    --dd-focus: oklch(0.48 0.174 293);
  }
}