/* ============================================================================
   Yuvomi - Design tokens for the GitHub Pages site
   ============================================================================

   ONE COPY, FOUR PAGES. index.html, install.html, datenschutz.html and
   impressum.html each carried their own `:root` block. The four had already
   drifted apart - `--m-split` alone held three different dark values, and the
   legal pages defined a subset that silently diverged from the landing page
   they are linked from. A shared file cannot drift from itself.

   The page keeps its OWN token names (`--bg`, `--accent`, `--m-*`) and does not
   load the app's `public/styles/tokens.css`: a static site should not depend on
   the application's stylesheet, and the app's ladder carries far more rungs
   than a landing page needs. What is shared is the VALUES - every colour below
   is an app token, named in the comment beside it.

   Why they follow the app at all: the page is largely made OF the app. Twenty-
   two screenshots show the shipped interface, and after the v2.0.0 redesign
   they are cool grey on Apple Indigo while this page was still warm linen on
   #6c3aed. A landing page may be louder than the tool it sells, but it should
   not preview a version that no longer exists.
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* The system stack, same as the app's --font-sans. Plus Jakarta Sans left the
     app with the redesign and now leaves this page too.

     The woff2 files under docs/fonts/ STAY: scripts/build-umbrel-gallery.mjs and
     scripts/generate-social-preview.mjs embed them when they render the store
     gallery and the Open Graph image. Those are pictures, not pages - whether
     the marketing imagery follows the new type is its own question, and until
     it is answered the files have two readers. (The separate copy under
     public/fonts/ is a different matter: no @font-face in public/ names it any
     more, yet the installer still serves it and a test still asserts the 200.) */
  --ff: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif;
  --ff-mono: ui-monospace, 'SF Mono', 'Fira Code', 'Fira Mono', 'Roboto Mono', monospace;

  /* Warm neutral surfaces, from the app's neutral ramp.
     The ladder runs surface > bg > bg-alt so a card stays visible on both
     grounds - the alternating section band is the app's own page background,
     and a card on it is the same white plate the app uses. */
  --bg: #FBFAF7;             /* --neutral-50  */
  --bg-alt: #F5F3ED;         /* --neutral-100, the app's grouped background */
  --surface: #FFFFFF;        /* --color-surface */
  --border: #E4E0D7;         /* --neutral-200 */
  --border-strong: #CFC9BC;  /* --neutral-300 */
  --text-1: #1D1B17;         /* --neutral-900, Label */
  --text-2: #4A4741;         /* --neutral-700 */
  --text-3: #63615B;         /* --neutral-600, AA on both grounds (6.19:1 / 5.58:1) */

  --accent: #6C3AED;         /* --color-accent, the violet of the app icon */
  --accent-hover: #5B2FD4;   /* --color-accent-hover */
  --accent-ink: #FFFFFF;     /* --color-ink-on-vivid; 6.10:1 on --accent */

  /* Derived from --accent instead of restated per theme, which is why neither
     appears in the dark block below. The percentages are the app's tint scale
     (tokens.css 6b): 16% is `--tint-surface`, the step where the tint IS the
     element; 70% is `--tint-ink`, the readable step of the same hue.
     Measured: 7.06:1 light, 6.13:1 dark. */
  --accent-soft: color-mix(in srgb, var(--accent) 16%, var(--surface));
  /* Ziffer auf --accent-soft. Im Light traegt das --accent selbst (4.65:1), im
     Dark nicht: --accent #A78BFA auf dem dortigen --accent-soft #3b3445 misst
     4.38:1 bei noetigen 4.5:1, und 16.8px/700 ist keine "large text"-Ausnahme
     (dafuer braeuchte es >=18.66px bold). Drei unabhaengige Messverfahren kamen
     auf denselben Wert (Critique 2026-08-16). Der Dark-Wert ist bewusst das
     schon vorhandene --accent-hover (5.67:1) statt eines neuen Violettwerts.
     ACHTUNG: beide Dark-Pfade pflegen, sonst driftet es wie seinerzeit --m-split. */
  --accent-on-soft: var(--accent);
  --accent-deep: color-mix(in srgb, var(--accent) 70%, var(--text-1));
  --accent-glow: color-mix(in srgb, var(--accent) 16%, transparent);

  /* Focus ring, overridable per surface. --accent clears SC 2.4.11 on every
     paper surface but not on the fixed near-black code plate, which is the
     same colour in both themes and carries --code-accent instead. */
  --focus-ring: var(--accent);

  /* Module accent signature, from the app's --module-* tokens. Calendar moved
     to azure when the app colour became the violet of the icon: next to it,
     the old Violet-700 was the same tone. */
  --m-tasks: #157F3D;
  --m-calendar: #00668F;
  --m-meals: #C2410C;
  /* Vorrat zieht in der App aus derselben Familie wie Mahlzeiten
     (tokens.css: --module-pantry und --module-meals sind beide
     --_family-kitchen). Als Referenz statt als Hexwert notiert: so folgt es den
     beiden Dark-Bloecken von selbst und kann nicht wie --m-split auseinander
     laufen. Fehlte, seit die vierte Handoff-Zeile es benutzt - das leere Token
     liess ausgerechnet die Solo-Zeile ohne Farbe. */
  --m-pantry: var(--m-meals);
  --m-recipes: #0C7C5B;
  --m-shopping: #CF236F;
  --m-notes: #9D6007;
  --m-contacts: #0969DA;
  --m-birthdays: #CE2A63;
  --m-budget: #0F766E;
  --m-documents: #42587E;
  /* Inventory shares the app's records family with Documents on purpose - there
     the two are told apart by their seal, not by their tone. */
  --m-inventory: #42587E;
  --m-housekeeping: #7C3AED;
  --m-health: #9E1E88;
  --m-rewards: #BA4468;
  --m-split: #1975A5;
  /* Infrastruktur, kein Modul. Backup und API-Tokens trugen hier die Toene von
     Aufgaben und Gemeinsamen Ausgaben - eine Farbe, die in der App eine
     Zugehoerigkeit BEDEUTET, auf einer Karte, die keine hat. Der Neutralton ist
     der der App (--_family-neutral) und sagt zusaetzlich: das hier schaltet ihr
     nicht an und aus. Gemessen als Grafik (3:1 verlangt): 5.04:1 auf --surface,
     4.82:1 auf --bg. */
  --m-infra: #677079;

  /* The code plate keeps ONE palette in both themes - it is a terminal, and a
     terminal does not turn white. It now borrows the app's dark neutrals so it
     reads as the same material as a dark-mode card. --code-accent doubles as
     the focus ring there (5.66:1 on the plate), --code-comment holds 5.22:1. */
  --code-bg: #262422;
  --code-text: #F5F3ED;
  --code-comment: #948E85;
  --code-accent: #A78BFA;

  /* --r-xs is the inline-chip radius. It existed as a hardcoded 4px in five
     places and as a stray 5px in two more, on a scale that starts at 8px.
     This scale stays the PAGE's own: a landing page's card corner is not an
     app control, and --radius-sm moved to 10px in the app for touch targets
     that do not exist here. */
  --r-xs: 4px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 22px; --r-2xl: 28px; --r-full: 999px;
  /* Device-frame radii, deliberately off the UI scale: they trace the corner
     of a photographed phone, not a card. They had drifted to three raw
     literals - 26px on .hero-float and the carousel, 20px on .feat-mobile,
     --r-2xl on the narrow gallery frame - which is why the same phone wore a
     different corner in three places. The inset variant is a third of the
     width, where the full radius reads as a squircle. */
  --r-phone: 26px; --r-phone-inset: 20px;

  /* Neutral shadows, like the app's. They used to carry a warm tint
     (rgba(18,14,8,…)) that belonged to the linen palette. */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05), 0 1px 4px rgba(0,0,0,0.04);
  --shadow-md: 0 2px 10px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.05);
  --shadow-lg: 0 10px 30px rgba(0,0,0,0.12), 0 3px 8px rgba(0,0,0,0.05);
  --shadow-xl: 0 22px 60px rgba(0,0,0,0.18), 0 6px 16px rgba(0,0,0,0.07);
  --shadow-hero: 0 32px 80px rgba(0,0,0,0.20), 0 10px 30px rgba(0,0,0,0.08);

  --glass-bg: rgba(255,255,255,0.70);
  --glass-border: rgba(255,255,255,0.65);
  --glass-blur: blur(18px) saturate(180%);

  /* One curve, one name. Both pages used to call this --ease-spring with
     different values, and index declared it twice on top of that. Exponential
     ease-out: nothing here is a glass element, and overshoot on a hover lift
     reads as wobble. */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --success-ink: #186A2C;   /* --color-success-ink */
  --warn-ink: #8F4F00;      /* --color-warning-ink */

  --grain: 0.025;
}

/* The explicit choice from the theme toggle. */
[data-theme="dark"] {
  /* The app's dark ground is warm charcoal (#191816) and its card a distinct
     step above it (#262422). It moved off the near-black floor it stood on
     until v2.1.0, where cards had nothing to separate from. --bg-alt goes DOWN
     from --bg, as it did before, so an alternating band still reads as
     recessed. */
  --bg: #191816;             /* --neutral-100 (dark) */
  --bg-alt: #0F0E0D;         /* --neutral-50 (dark) */
  --surface: #262422;        /* --color-surface (dark) */
  --border: #454039;         /* --color-border (dark), set apart from the ramp */
  --border-strong: #4E4A44;  /* --neutral-300 (dark) */
  --text-1: #F5F3ED;         /* --neutral-900 (dark) */
  --text-2: #CBC5BC;         /* --neutral-700 (dark) */
  --text-3: #B4AEA5;         /* --neutral-600 (dark), ~6.9:1 on --surface */

  --accent: #A78BFA;         /* --color-accent (dark) */
  --accent-hover: #BCA6FC;   /* --color-accent-hover (dark) */
  --accent-on-soft: #BCA6FC; /* siehe :root - beide Dark-Pfade */
  --accent-ink: #191816;     /* --color-ink-on-vivid (dark) */
  /* A touch stronger than light, as before - a glow has less to work with on a
     dark ground. --accent-soft and --accent-deep need no entry: they are
     color-mix on --accent and --surface/--text-1, which all moved above. */
  --accent-glow: color-mix(in srgb, var(--accent) 22%, transparent);

  --m-tasks: #4ADE80;
  --m-calendar: #4CB8F0;
  --m-meals: #FB923C;
  --m-recipes: #2ECC99;
  --m-shopping: #F472B6;
  --m-notes: #FCD34D;
  --m-contacts: #60A5FA;
  --m-birthdays: #FB7185;
  --m-budget: #2DD4BF;
  --m-documents: #7E9BCC;
  --m-inventory: #7E9BCC;
  --m-housekeeping: #C4B5FD;
  --m-health: #DB60CB;
  --m-rewards: #E68CA6;
  --m-split: #2FB6E8;
  --m-infra: #A2ACB6;

  /* The code plate is deliberately NOT mirrored: it is the one surface that
     keeps its own palette in both themes. */

  --shadow-sm: 0 1px 3px rgba(0,0,0,0.30);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.38);
  --shadow-lg: 0 12px 30px rgba(0,0,0,0.48);
  --shadow-xl: 0 22px 60px rgba(0,0,0,0.60);
  --shadow-hero: 0 32px 80px rgba(0,0,0,0.66), 0 10px 30px rgba(0,0,0,0.30);

  --glass-bg: rgba(28,28,30,0.66);
  --glass-border: rgba(255,255,255,0.10);

  --success-ink: #6ADE87;   /* --color-success-ink (dark) */
  --warn-ink: #FFB84A;      /* --color-warning-ink (dark) */
}

/* The system preference, for visitors who never touched the toggle - the
   common case, since the head script only sets data-theme when localStorage
   holds one. This block used to be a hand-copied twin of the one above and
   went out of sync twice (--success-ink was missing entirely, leaving the
   "1 click" badges at 2.45:1 for exactly these visitors; --m-split held a
   third value). It now inherits instead of repeating: one declaration list,
   two selectors. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #191816;
    --bg-alt: #0F0E0D;
    --surface: #262422;
    --border: #454039;
    --border-strong: #4E4A44;
    --text-1: #F5F3ED;
    --text-2: #CBC5BC;
    --text-3: #B4AEA5;

    --accent: #A78BFA;
    --accent-hover: #BCA6FC;
    --accent-on-soft: #BCA6FC;
    --accent-ink: #191816;
    --accent-glow: color-mix(in srgb, var(--accent) 22%, transparent);

    --m-tasks: #4ADE80;
    --m-calendar: #4CB8F0;
    --m-meals: #FB923C;
    --m-recipes: #2ECC99;
    --m-shopping: #F472B6;
    --m-notes: #FCD34D;
    --m-contacts: #60A5FA;
    --m-birthdays: #FB7185;
    --m-budget: #2DD4BF;
    --m-documents: #7E9BCC;
    --m-inventory: #7E9BCC;
    --m-housekeeping: #C4B5FD;
    --m-health: #DB60CB;
    --m-rewards: #E68CA6;
    --m-split: #2FB6E8;
    --m-infra: #A2ACB6;

    --shadow-sm: 0 1px 3px rgba(0,0,0,0.30);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.38);
    --shadow-lg: 0 12px 30px rgba(0,0,0,0.48);
    --shadow-xl: 0 22px 60px rgba(0,0,0,0.60);
    --shadow-hero: 0 32px 80px rgba(0,0,0,0.66), 0 10px 30px rgba(0,0,0,0.30);

    --glass-bg: rgba(28,28,30,0.66);
    --glass-border: rgba(255,255,255,0.10);

    --success-ink: #6ADE87;
    --warn-ink: #FFB84A;
  }
}