/* Kaulav design tokens — single source of truth for web + design previews.
   SwiftUI mirror: design/Theme.swift. Rationale: design/DESIGN.md. */
:root{
  /* Neutrals — three greys do all the structure */
  --canvas:#EFEEEB;          /* page: warm fog, never pure white */
  --card:#F7F6F4;            /* content squircles */
  --card-2:#FFFFFF;          /* pills, chips on cards */
  --ink:#14161B;             /* primary text */
  --ink-2:#5E636D;           /* secondary text */
  --ink-3:#9EA2AA;           /* tertiary / dimmed title sibling */
  --hair:rgba(20,22,27,.08); /* hairlines, outline pills */

  /* Brand accent — Hi-Vis (safety-vest yellow-green). Status only: Ready / Offline ✓ */
  --hivis:#DEF20A;
  --hivis-ink:#1A1D05;

  /* Status solids (text, dots, icons — never large fills) */
  --ready:#2F9E52;
  --attention:#E9822F;
  --alert:#EE4B5A;
  --info:#5B7FD6;

  /* Mood gradients — colour always means a state. Layer: grain on top. */
  --mood-ready:   radial-gradient(120% 80% at 20% 0%, #D9A86E 0%, rgba(217,168,110,0) 55%),
                  radial-gradient(110% 80% at 80% 100%, #1F8A45 0%, rgba(31,138,69,0) 70%),
                  linear-gradient(180deg, #C9A65C 0%, #7DB94F 50%, #2E9A4E 100%);
  --mood-attention: radial-gradient(70% 60% at 62% 40%, #F37A36 0%, rgba(243,122,54,0) 70%),
                  radial-gradient(90% 80% at 40% 30%, #F2B43E 0%, rgba(242,180,62,0) 75%),
                  linear-gradient(180deg, #D99A5E 0%, #C98A86 100%);
  --mood-alert:   radial-gradient(60% 55% at 50% 45%, #EE3550 0%, rgba(238,53,80,0) 72%),
                  radial-gradient(90% 90% at 50% 50%, #F0707A 0%, rgba(240,112,122,0) 80%),
                  linear-gradient(180deg, #E58A8C 0%, #D96E80 100%);
  --mood-tide:    radial-gradient(80% 70% at 75% 20%, #CFE2F5 0%, rgba(207,226,245,0) 70%),
                  radial-gradient(80% 70% at 20% 90%, #F3E2C6 0%, rgba(243,226,198,0) 70%),
                  linear-gradient(180deg, #DCD6F2 0%, #E9E6F4 100%);
  --mood-night:   radial-gradient(70% 55% at 50% 30%, rgba(242,163,58,.55) 0%, rgba(242,163,58,0) 70%),
                  radial-gradient(120% 90% at 50% 100%, #1C2347 0%, rgba(28,35,71,0) 70%),
                  linear-gradient(180deg, #11152B 0%, #06070F 100%);

  /* Film grain (SVG turbulence) — overlay at 12–18% */
  --grain:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");

  /* Frost (content tile on a gradient — tinted translucent, NOT Liquid Glass) */
  --frost:rgba(255,255,255,.20);
  --frost-strong:rgba(255,255,255,.32);
  --frost-line:rgba(255,255,255,.28);
  --on-mood:rgba(255,255,255,.96);
  --on-mood-2:rgba(255,255,255,.74);

  /* Glass (controls + navigation layer only) */
  --glass:linear-gradient(180deg, rgba(255,255,255,.78) 0%, rgba(255,255,255,.52) 100%);
  --glass-dark:rgba(28,30,36,.55);
  --glass-line:rgba(255,255,255,.75);
  --glass-shadow:0 12px 32px -8px rgba(20,22,27,.22), 0 2px 6px rgba(20,22,27,.06),
                 inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(255,255,255,.35), inset 0 0 0 .5px rgba(255,255,255,.6);
  /* Soft physical depth for content surfaces */
  --lift:inset 0 1px 0 rgba(255,255,255,.9), 0 1px 2px rgba(20,22,27,.04), 0 14px 34px -22px rgba(20,22,27,.28);
  --blur:saturate(170%) blur(22px);

  /* Shape — continuous corners, concentric */
  --r-hero:40px; --r-card:32px; --r-tile:26px; --r-chip:999px; --r-sheet:38px;
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px; --s-8:32px; --s-10:40px; --s-14:56px;

  /* Type — Inter on web (SF Pro in app). Light + light italic carry the voice. */
  --font:"Inter", system-ui, -apple-system, "SF Pro Text", "Segoe UI", sans-serif;
  --font-display:"Manrope", "Inter", system-ui, sans-serif; /* marketing headlines only */
  --t-display:clamp(44px,7vw,88px); --t-h1:34px; --t-h2:26px; --t-h3:19px; --t-body:16px; --t-cap:13px; --t-micro:11px;
  --track-tight:-.035em; --track:-.01em;

  /* Motion */
  --ease:cubic-bezier(.2,.8,.2,1); --dur:.35s;
}

/* Blackout mode: OLED black saves battery during a power cut. App: Settings → Blackout mode, auto on Low Power. */
[data-mode="blackout"]{
  --canvas:#000000; --card:#0E0F12; --card-2:#17181C;
  --ink:#F3F1EC; --ink-2:#A6A9B0; --ink-3:#5F636B; --hair:rgba(255,255,255,.10);
  --glass:linear-gradient(180deg, rgba(44,46,54,.72) 0%, rgba(24,26,32,.6) 100%); --glass-line:rgba(255,255,255,.14);
  --glass-shadow:0 12px 32px -8px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.14), inset 0 0 0 .5px rgba(255,255,255,.08);
  --lift:inset 0 1px 0 rgba(255,255,255,.05), 0 14px 34px -22px rgba(0,0,0,.8);
}

@media (prefers-reduced-motion: reduce){ :root{ --dur:0s } }