/* Brick Work design tokens, served. GENERATED by scripts/tokens_base.py build: never edit this file.
   Sources: design/tokens/tokens.css (the design builder base, pinned) and design/tokens/brickwork-tokens.css
   (Brick Work layer, loaded after the base). The name tokens-v2.css is kept so every page links it as before. */

/* ---- base (design/tokens/tokens.css) ---- */
/* Neutral design base · v1 (2026-11-03) — the design builder skill's brand-free base (App Design Standard).

   What it is: the structural tokens every app shares (spacing, motion, touch, safe areas, layout, z-index, focus,
   a type-scale skeleton) and the colour ROLES every app must define. On its own it renders black on white with
   system type: that is the look of the black-and-white wireframes (workflow step 2). No brand colour, no web
   font, no font CDN, no brand radii.

   How an app uses it: copy this file unchanged to design/tokens/tokens.css with a provenance header naming the
   source path (.claude/skills/design-builder/base/tokens.css), the ai-wiki commit and the file's SHA-256, and pin
   it with the drift check (engram's scripts/tokens_base.py is the reference implementation). Never edit the copy.
   The app layer design/tokens/<app>-tokens.css, loaded after it, redefines every colour role light and dark, the
   type families and scale, and the radii. A switch to a newer base is its own step with a frame comparison.

   The --tw-* names are the house's contract names, kept so existing app layers and components work unchanged;
   they carry no Toni's World brand here.

   Theme mechanism (as before): default light; prefers-color-scheme: dark switches unless .tw-light is on <html>;
   .tw-dark / .tw-light force a subtree. A token defined as a reference (--tw-focus-color: var(--tw-accent)) is
   repeated in every theme block of the app layer. */

:root {
  /* Colour roles: neutral placeholders the app layer must redefine (light) */
  --tw-bg:             #FFFFFF;
  --tw-surface:        #FFFFFF;
  --tw-surface-2:      #F2F2F2;
  --tw-divider:        #D9D9D9;
  --tw-divider-strong: #8C8C8C;
  --tw-text:           #111111;
  --tw-text-2:         #333333;
  --tw-text-muted:     #595959;   /* 7.0:1 on white */
  --tw-text-faint:     #595959;   /* no fainter text than muted until an app defines one that passes 4.5:1 */
  --tw-accent:         #111111;
  --tw-accent-soft:    #E6E6E6;
  --tw-accent-text:    #111111;
  --tw-on-accent:      #FFFFFF;
  --tw-success:        #111111;  --tw-success-soft: #F2F2F2;
  --tw-warning:        #111111;  --tw-warning-soft: #F2F2F2;
  --tw-danger:         #111111;  --tw-danger-soft:  #F2F2F2;
  --tw-info:           #111111;  --tw-info-soft:    #F2F2F2;
  --tw-scrim:          rgba(0, 0, 0, 0.40);
  --tw-sheet-bg:       var(--tw-bg);
  --tw-toast-bg:       var(--tw-text);
  --tw-toast-fg:       var(--tw-bg);

  /* Data roles (charts, base/charts.md): actual, previous, plan, forecast and two neutrals */
  --tw-viz-ac: #111111;   /* actual */
  --tw-viz-py: #8C8C8C;   /* previous period: quieter, same hue */
  --tw-viz-n1: #D9D9D9;   /* track, gridlines */
  --tw-viz-n2: #595959;   /* comparison series, reference lines, axis labels */

  /* Type: system faces and a scale skeleton; the app layer sets its own families and may retune the scale */
  --tw-font:    -apple-system, system-ui, sans-serif;
  --tw-font-alt: var(--tw-font);
  --tw-mono:    ui-monospace, SFMono-Regular, monospace;
  --tw-fs-display: 34px;  --tw-lh-display: 40px;
  --tw-fs-h1:      28px;  --tw-lh-h1:      34px;
  --tw-fs-h2:      22px;  --tw-lh-h2:      28px;
  --tw-fs-h3:      18px;  --tw-lh-h3:      24px;
  --tw-fs-body:    17px;  --tw-lh-body:    27px;
  --tw-fs-small:   14px;  --tw-lh-small:   20px;
  --tw-fs-label:   12px;  --tw-lh-label:   16px;   /* 12 px is the smallest text */

  /* Spacing: 4 px steps */
  --tw-s-0: 0; --tw-s-1: 4px; --tw-s-2: 8px; --tw-s-3: 12px; --tw-s-4: 16px;
  --tw-s-5: 20px; --tw-s-6: 24px; --tw-s-7: 32px; --tw-s-8: 40px; --tw-s-9: 56px;

  /* Radii: square until the app layer decides */
  --tw-r-1: 0; --tw-r-2: 0; --tw-r-3: 0;
  --tw-sheet-radius: var(--tw-r-3);
  --tw-sheet-edge:   1px solid var(--tw-divider-strong);

  /* Touch */
  --tw-hit:    44px;   /* minimum target, every tappable thing */
  --tw-hit-lg: 56px;   /* primary actions */

  /* Motion */
  --tw-ease:     cubic-bezier(0.2, 0.6, 0.2, 1);
  --tw-dur-fast: 120ms;   /* state changes, pressed */
  --tw-dur-base: 240ms;   /* sheets, drawers, pushes */

  /* Focus */
  --tw-focus-width:  2px;
  --tw-focus-offset: 2px;
  --tw-focus-color:  var(--tw-accent);

  /* Layout and safe areas (Home Screen app) */
  --tw-safe-top:    env(safe-area-inset-top, 0px);
  --tw-safe-bottom: env(safe-area-inset-bottom, 0px);
  --tw-safe-left:   env(safe-area-inset-left, 0px);
  --tw-safe-right:  env(safe-area-inset-right, 0px);
  --tw-gutter:      20px;    /* side gutter at 390 */
  --tw-grid-gap:    8px;     /* 12-column grid gap */
  --tw-col-max:     640px;   /* reading column at wide sizes */
  --tw-topbar-h:    52px;
  --tw-tabbar-h:    49px;

  /* Stacking */
  --tw-z-bar:   10;
  --tw-z-sheet: 20;
  --tw-z-toast: 30;
}

@media (prefers-color-scheme: dark) {
  :root:not(.tw-light) {
    --tw-bg: #111111; --tw-surface: #1A1A1A; --tw-surface-2: #262626;
    --tw-divider: #333333; --tw-divider-strong: #8C8C8C;
    --tw-text: #F2F2F2; --tw-text-2: #D9D9D9; --tw-text-muted: #A6A6A6; --tw-text-faint: #A6A6A6;
    --tw-accent: #F2F2F2; --tw-accent-soft: #333333; --tw-accent-text: #F2F2F2; --tw-on-accent: #111111;
    --tw-success: #F2F2F2; --tw-success-soft: #262626; --tw-warning: #F2F2F2; --tw-warning-soft: #262626;
    --tw-danger: #F2F2F2;  --tw-danger-soft: #262626;  --tw-info: #F2F2F2;    --tw-info-soft: #262626;
    --tw-scrim: rgba(0, 0, 0, 0.55); --tw-sheet-bg: var(--tw-surface);
    --tw-toast-bg: var(--tw-text); --tw-toast-fg: var(--tw-bg); --tw-focus-color: var(--tw-accent);
    --tw-viz-ac: #F2F2F2; --tw-viz-py: #8C8C8C; --tw-viz-n1: #333333; --tw-viz-n2: #A6A6A6;
  }
}

.tw-dark {
  --tw-bg: #111111; --tw-surface: #1A1A1A; --tw-surface-2: #262626;
  --tw-divider: #333333; --tw-divider-strong: #8C8C8C;
  --tw-text: #F2F2F2; --tw-text-2: #D9D9D9; --tw-text-muted: #A6A6A6; --tw-text-faint: #A6A6A6;
  --tw-accent: #F2F2F2; --tw-accent-soft: #333333; --tw-accent-text: #F2F2F2; --tw-on-accent: #111111;
  --tw-success: #F2F2F2; --tw-success-soft: #262626; --tw-warning: #F2F2F2; --tw-warning-soft: #262626;
  --tw-danger: #F2F2F2;  --tw-danger-soft: #262626;  --tw-info: #F2F2F2;    --tw-info-soft: #262626;
  --tw-scrim: rgba(0, 0, 0, 0.55); --tw-sheet-bg: var(--tw-surface);
  --tw-toast-bg: var(--tw-text); --tw-toast-fg: var(--tw-bg); --tw-focus-color: var(--tw-accent);
  --tw-viz-ac: #F2F2F2; --tw-viz-py: #8C8C8C; --tw-viz-n1: #333333; --tw-viz-n2: #A6A6A6;
}

.tw-light {
  --tw-bg: #FFFFFF; --tw-surface: #FFFFFF; --tw-surface-2: #F2F2F2;
  --tw-divider: #D9D9D9; --tw-divider-strong: #8C8C8C;
  --tw-text: #111111; --tw-text-2: #333333; --tw-text-muted: #595959; --tw-text-faint: #595959;
  --tw-accent: #111111; --tw-accent-soft: #E6E6E6; --tw-accent-text: #111111; --tw-on-accent: #FFFFFF;
  --tw-success: #111111; --tw-success-soft: #F2F2F2; --tw-warning: #111111; --tw-warning-soft: #F2F2F2;
  --tw-danger: #111111;  --tw-danger-soft: #F2F2F2;  --tw-info: #111111;    --tw-info-soft: #F2F2F2;
  --tw-scrim: rgba(0, 0, 0, 0.40); --tw-sheet-bg: var(--tw-bg);
  --tw-toast-bg: var(--tw-text); --tw-toast-fg: var(--tw-bg); --tw-focus-color: var(--tw-accent);
  --tw-viz-ac: #111111; --tw-viz-py: #8C8C8C; --tw-viz-n1: #D9D9D9; --tw-viz-n2: #595959;
}

@media (prefers-reduced-motion: reduce) {
  :root { --tw-dur-fast: 0ms; --tw-dur-base: 0ms; }
}

:focus-visible {
  outline: var(--tw-focus-width) solid var(--tw-focus-color);
  outline-offset: var(--tw-focus-offset);
}

/* ---- Brick Work layer (design/tokens/brickwork-tokens.css) ---- */
/* Brick Work layer · design tokens (#158). Loaded after design/tokens/tokens.css (the design builder's neutral base).
   It redefines every colour role light and dark, the type and the radii. Its values are the stylesheet Brick Work served
   before the App Design Standard roll-out, unchanged (ADR 0022: no visual change); the --tw-* names are the house's contract
   names and carry no Toni's World brand here.

   Dark-mode mechanism:
   1. Default is light.
   2. prefers-color-scheme: dark switches to dark unless .tw-light is set on <html>.
   3. .tw-dark / .tw-light on any element force that mode for its subtree (override wins both ways).
   The user's choice ('system' | 'light' | 'dark') is kept in localStorage and set on <html> before first paint.

   Standalone chrome (Home Screen app): content runs under the status bar; fixed bars pad with --tw-safe-top / --tw-safe-bottom.
   Edit this file, then run `python3 scripts/tokens_base.py build`; the served static/web/toni/tokens-v2.css is generated. */

:root {
  /* ── v1: light ── */
  --tw-bg:           #FAFAF8;
  --tw-surface:      #F2EFE9;
  --tw-surface-2:    #ECE8DF;
  --tw-divider:      #E7E2D7;
  --tw-text:         #1A1816;
  --tw-text-2:       #45413B;
  --tw-text-muted:   #8A847A;
  --tw-text-faint:   #B5AFA3;
  --tw-accent:       oklch(0.66 0.17 45);
  --tw-accent-soft:  oklch(0.93 0.04 55);
  --tw-accent-text:  oklch(0.54 0.17 42);
  --tw-danger:       oklch(0.62 0.18 25);

  --tw-font:    'Inter', -apple-system, system-ui, sans-serif;
  --tw-font-alt:'Geist', -apple-system, system-ui, sans-serif;
  --tw-mono:    'Geist Mono', ui-monospace, SFMono-Regular, monospace;

  --tw-fs-display: 34px;  --tw-lh-display: 40px;
  --tw-fs-h1:      28px;  --tw-lh-h1:      34px;
  --tw-fs-h2:      22px;  --tw-lh-h2:      28px;
  --tw-fs-h3:      18px;  --tw-lh-h3:      24px;
  --tw-fs-body:    17px;  --tw-lh-body:    27px;
  --tw-fs-small:   14px;  --tw-lh-small:   20px;
  --tw-fs-label:   11px;  --tw-lh-label:   14px;
  --tw-tracking-label: 0.10em;

  --tw-s-0: 0; --tw-s-1: 4px; --tw-s-2: 8px; --tw-s-3: 12px; --tw-s-4: 16px;
  --tw-s-5: 20px; --tw-s-6: 24px; --tw-s-7: 32px; --tw-s-8: 40px; --tw-s-9: 56px;

  --tw-r-1: 6px; --tw-r-2: 10px; --tw-r-3: 16px;

  /* ── v2 additions ── */

  /* Status: semantic signals, never decoration. Muted, ink-like; lower chroma than the accent
     so clay stays the only colour the eye latches onto. -soft is for pill/tile grounds only. */
  --tw-success:      oklch(0.55 0.08 150);
  --tw-success-soft: oklch(0.94 0.025 150);
  --tw-warning:      oklch(0.64 0.10 80);
  --tw-warning-soft: oklch(0.94 0.035 85);
  --tw-info:         oklch(0.54 0.06 245);
  --tw-info-soft:    oklch(0.94 0.015 245);
  --tw-danger-soft:  oklch(0.94 0.03 25);

  /* Stronger hairline for overlay edges and control outlines */
  --tw-divider-strong: #D8D1C3;

  /* Touch */
  --tw-hit:    44px;   /* minimum hit area, every tappable thing */
  --tw-hit-lg: 56px;   /* primary actions, scale-picker cells */

  /* Motion */
  --tw-ease:      cubic-bezier(0.2, 0.6, 0.2, 1);
  --tw-dur-fast:  120ms;  /* state changes, pressed */
  --tw-dur-base:  240ms;  /* sheets, drawers, pushes */

  /* Overlays without shadows: scrim + surface step + hairline edge */
  --tw-scrim:        rgba(20, 15, 5, 0.30);
  --tw-sheet-bg:     var(--tw-bg);
  --tw-sheet-edge:   0.5px solid var(--tw-divider-strong);
  --tw-sheet-radius: var(--tw-r-3);
  --tw-toast-bg:     var(--tw-text);      /* inverted ink — separates by contrast, not elevation */
  --tw-toast-fg:     var(--tw-bg);

  /* Focus: accent, 2px, 2px offset */
  --tw-focus-width:  2px;
  --tw-focus-offset: 2px;
  --tw-focus-color:  var(--tw-accent);

  /* Data viz: sequential clay ramp (light → deep) + two neutrals.
     One series: --tw-viz-4. Two series: primary --tw-viz-4 solid, comparison --tw-viz-n2 dashed.
     Never two clays side by side as separate series. Thresholds/ratings use status tokens. */
  --tw-viz-1:  oklch(0.92 0.04 55);
  --tw-viz-2:  oklch(0.83 0.09 52);
  --tw-viz-3:  oklch(0.73 0.14 47);
  --tw-viz-4:  oklch(0.62 0.16 43);
  --tw-viz-5:  oklch(0.48 0.13 40);
  --tw-viz-n1: #DDD7CB;   /* track, gridlines */
  --tw-viz-n2: #8A847A;   /* comparison series, axis labels */

  /* Safe areas (standalone) */
  --tw-safe-top:    env(safe-area-inset-top, 0px);
  --tw-safe-bottom: env(safe-area-inset-bottom, 0px);
  --tw-tabbar-h:    49px;
  --tw-topbar-h:    52px;
}

@media (prefers-color-scheme: dark) {
  :root:not(.tw-light) {
    --tw-bg: #1A1816; --tw-surface: #232020; --tw-surface-2: #2C2826; --tw-divider: #2F2B27;
    --tw-text: #F1ECE3; --tw-text-2: #C8C2B6; --tw-text-muted: #8C857A; --tw-text-faint: #5F5A52;
    --tw-accent: oklch(0.78 0.16 55); --tw-accent-soft: oklch(0.32 0.07 45);
    --tw-accent-text: oklch(0.84 0.15 58); --tw-danger: oklch(0.72 0.16 25);
    --tw-success: oklch(0.76 0.09 150); --tw-success-soft: oklch(0.30 0.04 150);
    --tw-warning: oklch(0.80 0.10 82);  --tw-warning-soft: oklch(0.31 0.045 80);
    --tw-info:    oklch(0.76 0.06 245); --tw-info-soft:    oklch(0.30 0.03 245);
    --tw-danger-soft: oklch(0.31 0.06 25);
    --tw-divider-strong: #403A34;
    --tw-scrim: rgba(0, 0, 0, 0.45);
    --tw-sheet-bg: var(--tw-surface);
    --tw-viz-1: oklch(0.34 0.06 45); --tw-viz-2: oklch(0.48 0.10 48); --tw-viz-3: oklch(0.62 0.14 52);
    --tw-viz-4: oklch(0.76 0.15 55); --tw-viz-5: oklch(0.86 0.11 60);
    --tw-viz-n1: #36312C; --tw-viz-n2: #8C857A;
  }
}

.tw-light {
  --tw-bg: #FAFAF8; --tw-surface: #F2EFE9; --tw-surface-2: #ECE8DF; --tw-divider: #E7E2D7;
  --tw-text: #1A1816; --tw-text-2: #45413B; --tw-text-muted: #8A847A; --tw-text-faint: #B5AFA3;
  --tw-accent: oklch(0.66 0.17 45); --tw-accent-soft: oklch(0.93 0.04 55);
  --tw-accent-text: oklch(0.54 0.17 42); --tw-danger: oklch(0.62 0.18 25);
  --tw-success: oklch(0.55 0.08 150); --tw-success-soft: oklch(0.94 0.025 150);
  --tw-warning: oklch(0.64 0.10 80);  --tw-warning-soft: oklch(0.94 0.035 85);
  --tw-info:    oklch(0.54 0.06 245); --tw-info-soft:    oklch(0.94 0.015 245);
  --tw-danger-soft: oklch(0.94 0.03 25);
  --tw-divider-strong: #D8D1C3;
  --tw-scrim: rgba(20, 15, 5, 0.30);
  --tw-sheet-bg: var(--tw-bg);
  --tw-viz-1: oklch(0.92 0.04 55); --tw-viz-2: oklch(0.83 0.09 52); --tw-viz-3: oklch(0.73 0.14 47);
  --tw-viz-4: oklch(0.62 0.16 43); --tw-viz-5: oklch(0.48 0.13 40);
  --tw-viz-n1: #DDD7CB; --tw-viz-n2: #8A847A;
}

.tw-dark {
  --tw-bg: #1A1816; --tw-surface: #232020; --tw-surface-2: #2C2826; --tw-divider: #2F2B27;
  --tw-text: #F1ECE3; --tw-text-2: #C8C2B6; --tw-text-muted: #8C857A; --tw-text-faint: #5F5A52;
  --tw-accent: oklch(0.78 0.16 55); --tw-accent-soft: oklch(0.32 0.07 45);
  --tw-accent-text: oklch(0.84 0.15 58); --tw-danger: oklch(0.72 0.16 25);
  --tw-success: oklch(0.76 0.09 150); --tw-success-soft: oklch(0.30 0.04 150);
  --tw-warning: oklch(0.80 0.10 82);  --tw-warning-soft: oklch(0.31 0.045 80);
  --tw-info:    oklch(0.76 0.06 245); --tw-info-soft:    oklch(0.30 0.03 245);
  --tw-danger-soft: oklch(0.31 0.06 25);
  --tw-divider-strong: #403A34;
  --tw-scrim: rgba(0, 0, 0, 0.45);
  --tw-sheet-bg: var(--tw-surface);
  --tw-viz-1: oklch(0.34 0.06 45); --tw-viz-2: oklch(0.48 0.10 48); --tw-viz-3: oklch(0.62 0.14 52);
  --tw-viz-4: oklch(0.76 0.15 55); --tw-viz-5: oklch(0.86 0.11 60);
  --tw-viz-n1: #36312C; --tw-viz-n2: #8C857A;
}

:focus-visible {
  outline: var(--tw-focus-width) solid var(--tw-focus-color);
  outline-offset: var(--tw-focus-offset);
}

/* ---- Redefinitions of the base (#158) ----
   The layer redefines, in each block, every property the design builder base sets there, so the base never shows
   through. Each value is what Brick Work served before (the same block, else :root); a property that is new and used
   nowhere takes the base's value. Under reduced motion Brick Work keeps 120/240 ms (the base would set 0 ms): a
   candidate improvement listed for Ulf, not changed in the roll-out (ADR 0022). */

:root {
  --tw-on-accent: #FFFFFF;
  --tw-viz-ac: #111111;
  --tw-viz-py: #8C8C8C;
  --tw-safe-left: env(safe-area-inset-left, 0px);
  --tw-safe-right: env(safe-area-inset-right, 0px);
  --tw-gutter: 20px;
  --tw-grid-gap: 8px;
  --tw-col-max: 640px;
  --tw-z-bar: 10;
  --tw-z-sheet: 20;
  --tw-z-toast: 30;
}

@media (prefers-color-scheme: dark) {
  :root:not(.tw-light) {
    --tw-on-accent: #111111;
    --tw-toast-bg: var(--tw-text);
    --tw-toast-fg: var(--tw-bg);
    --tw-focus-color: var(--tw-accent);
    --tw-viz-ac: #F2F2F2;
    --tw-viz-py: #8C8C8C;
  }
}

.tw-dark {
  --tw-on-accent: #111111;
  --tw-toast-bg: var(--tw-text);
  --tw-toast-fg: var(--tw-bg);
  --tw-focus-color: var(--tw-accent);
  --tw-viz-ac: #F2F2F2;
  --tw-viz-py: #8C8C8C;
}

.tw-light {
  --tw-on-accent: #FFFFFF;
  --tw-toast-bg: var(--tw-text);
  --tw-toast-fg: var(--tw-bg);
  --tw-focus-color: var(--tw-accent);
  --tw-viz-ac: #111111;
  --tw-viz-py: #8C8C8C;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --tw-dur-fast: 120ms;
    --tw-dur-base: 240ms;
  }
}