/* Face Kit tokens — src/ui/tokens.css. Order: tokens.css, then assets/brand.css and any design template,
   then styles.css (kit-css). Every token is a default at zero specificity: a brand file or a template
   that defines the same name wins, whatever order they load in. */
:where(:root){
  /* The twelve brand properties — assets/brand.css replaces all of them. */
  --brand-primary:#1f6f54; --brand-accent:#b86f0e;
  --brand-background:#fbfaf7; --brand-text:#20241d; --brand-heading:#141811;
  --brand-header-background:#ffffff; --brand-header-text:#20241d;
  --brand-button-background:var(--brand-primary); --brand-button-text:#ffffff; --brand-link:var(--brand-primary);
  --brand-font-body:system-ui,-apple-system,"Segoe UI",sans-serif; --brand-font-heading:Georgia,"Times New Roman",serif;

  /* Scale. Design templates bring their own --space-*, --text-* and --radius-sm; theirs win by name. */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px;
  --text-xs:12px; --text-sm:14px; --text-md:16px; --text-lg:18px; --text-xl:24px; --text-2xl:32px; --text-3xl:48px;
  --type-caption:var(--text-xs); --type-label:var(--text-sm); --type-body:var(--text-md); --type-lead:var(--text-lg);
  --type-title:var(--text-xl); --type-section:var(--text-2xl); --type-display:var(--text-3xl);
  --leading-tight:1.15; --leading-normal:1.5;
  --radius-sm:6px; --radius:10px; --radius-lg:14px; --radius-full:999px;
  --bp-sm:640px; --bp-lg:1024px;
  --control-h:44px; --control-h-sm:32px;

  /* Surfaces: ground (the page), raised (a card), overlay (dialog, drawer, menu); sunken and inverse. */
  --surface-ground:var(--brand-background); --surface:#ffffff; --surface-raised:var(--surface); --surface-overlay:#ffffff;
  --surface-2:#f3f2ed; --surface-inverse:#171a1c; --on-inverse:#aab3ab; --on-inverse-strong:#ffffff; --inverse-active:#262c2e;
  --border:rgba(20,26,18,.13); --border-strong:rgba(20,26,18,.24); --muted:#5b6259;
  --shadow-1:0 1px 2px rgba(16,20,24,.07); --shadow-2:0 10px 30px rgba(16,20,24,.10); --shadow-3:0 24px 60px rgba(16,20,24,.18);
  --focus-ring-color:var(--brand-primary); --focus-ring-width:2px; --focus-ring-offset:2px;
  --scrim:rgba(10,14,12,.5); --on-media:#ffffff; --veil-strong:var(--veil-strong); --veil-soft:var(--veil-soft);

  /* Status: five roles, each a colour with its fill and border. A design template's
     --success-*, --warning-*, --danger-* and --info-* flow through when it defines them. */
  --status-ok:var(--success-fg,#1a6e49); --status-ok-bg:var(--success-bg,rgba(31,122,82,.11)); --status-ok-border:var(--success-border,rgba(31,122,82,.35));
  --status-warn:var(--warning-fg,#8a5806); --status-warn-bg:var(--warning-bg,rgba(217,143,31,.14)); --status-warn-border:var(--warning-border,rgba(217,143,31,.4));
  --status-danger:var(--danger-fg,#a8241c); --status-danger-bg:var(--danger-bg,rgba(168,36,28,.1)); --status-danger-border:var(--danger-border,rgba(168,36,28,.35));
  --status-info:var(--info-fg,#1d5f86); --status-info-bg:var(--info-bg,rgba(29,95,134,.1)); --status-info-border:var(--info-border,rgba(29,95,134,.35));
  --status-neutral:#5b6259; --status-neutral-bg:rgba(20,26,18,.07); --status-neutral-border:rgba(20,26,18,.2);
  /* The names the catalogue's earlier entries were written with, kept as aliases. */
  --ok:var(--status-ok); --ok-bg:var(--status-ok-bg); --warn2:var(--status-warn); --warn-bg:var(--status-warn-bg);
  --danger:var(--status-danger); --neutral-bg:var(--status-neutral-bg);

  /* Layers and motion. */
  --z-sticky:10; --z-drawer:40; --z-dialog:50; --z-toast:60;
  --duration-fast:120ms; --duration-base:200ms; --ease-standard:cubic-bezier(.2,0,0,1);
}
@media (pointer:fine){ :where(:root){ --control-h:36px; } }
@media (prefers-reduced-motion:reduce){ :where(:root){ --duration-fast:0ms; --duration-base:0ms; } }
:where([data-theme="dark"]){
  --brand-background:#15181a; --brand-text:#eaeee6; --brand-heading:#ffffff;
  --brand-header-background:#1d2124; --brand-header-text:#eaeee6; --brand-link:#7fd1b0;
  --surface:#1d2124; --surface-overlay:#23282b; --surface-2:#22272a;
  --surface-inverse:#0f1213; --inverse-active:#20262a;
  --border:rgba(255,255,255,.14); --border-strong:rgba(255,255,255,.28); --muted:#a2aba1;
  --focus-ring-color:#7fd1b0; --scrim:rgba(0,0,0,.6);
  --shadow-1:0 1px 2px rgba(0,0,0,.4); --shadow-2:0 10px 30px rgba(0,0,0,.45); --shadow-3:0 24px 60px rgba(0,0,0,.55);
  --status-ok:#5fd39d; --status-ok-bg:rgba(95,211,157,.14); --status-ok-border:rgba(95,211,157,.4);
  --status-warn:#e8b45c; --status-warn-bg:rgba(232,180,92,.14); --status-warn-border:rgba(232,180,92,.4);
  --status-danger:#ff8478; --status-danger-bg:rgba(255,132,120,.14); --status-danger-border:rgba(255,132,120,.4);
  --status-info:#7cc4ec; --status-info-bg:rgba(124,196,236,.14); --status-info-border:rgba(124,196,236,.4);
  --status-neutral:#a2aba1; --status-neutral-bg:rgba(255,255,255,.08); --status-neutral-border:rgba(255,255,255,.22);
}
@media (prefers-color-scheme:dark){ :where(:root:not([data-theme="light"])){
  --brand-background:#15181a; --brand-text:#eaeee6; --brand-heading:#ffffff;
  --brand-header-background:#1d2124; --brand-header-text:#eaeee6; --brand-link:#7fd1b0;
  --surface:#1d2124; --surface-overlay:#23282b; --surface-2:#22272a;
  --surface-inverse:#0f1213; --inverse-active:#20262a;
  --border:rgba(255,255,255,.14); --border-strong:rgba(255,255,255,.28); --muted:#a2aba1;
  --focus-ring-color:#7fd1b0; --scrim:rgba(0,0,0,.6);
  --shadow-1:0 1px 2px rgba(0,0,0,.4); --shadow-2:0 10px 30px rgba(0,0,0,.45); --shadow-3:0 24px 60px rgba(0,0,0,.55);
  --status-ok:#5fd39d; --status-ok-bg:rgba(95,211,157,.14); --status-ok-border:rgba(95,211,157,.4);
  --status-warn:#e8b45c; --status-warn-bg:rgba(232,180,92,.14); --status-warn-border:rgba(232,180,92,.4);
  --status-danger:#ff8478; --status-danger-bg:rgba(255,132,120,.14); --status-danger-border:rgba(255,132,120,.4);
  --status-info:#7cc4ec; --status-info-bg:rgba(124,196,236,.14); --status-info-border:rgba(124,196,236,.4);
  --status-neutral:#a2aba1; --status-neutral-bg:rgba(255,255,255,.08); --status-neutral-border:rgba(255,255,255,.22);
} }