/* tokens.css: the single source of design tokens (colour, type, space, radius, shadow, z-index,
   motion, touch size). Nothing else defines these values. See docs/CSS-TOKENS.md.
   Order matters: dark default, light, outdoor and high contrast (forced dark, they win over light),
   then the customer-page scope. Tenant branding hooks (--tenant-accent, --tenant-on-accent,
   --tenant-accent-text) are intentionally undefined here; the fallbacks give the amber fill with
   dark text and the theme's accent text. */

/* Dark is the default and the fallback for any unknown data-theme. */
:root{
  color-scheme:dark;
  --page:#141c27;
  --surface:#202d3d;
  --elevated:#29394c;
  --raised:#34485d;
  --text:#f2f6fc;
  --text-secondary:#c6d3e3;
  --text-muted:#a6b9ce;
  --border:#40546b;
  --border-strong:#607992;
  --divider:#34465b;
  --input-bg:#172434;
  --input-border:#607992;
  --hover:#2d4259;
  --overlay:rgba(5,12,22,.72);
  --accent:var(--tenant-accent,#ffba52);
  --accent-2:#ff963d;
  --accent-contrast:#251a07;
  --accent-text:var(--tenant-accent-text,#ffba52);
  --cool:#7fc5ff;
  --purple:#c4adff;
  --success:#70e0b0;
  --warning:#ffd36c;
  --danger:#ff9b9b;
  --on-danger:#211210;
  --warning-bg:#493c24;
  --shadow-sm:0 2px 8px #050d1826;
  --shadow:0 8px 24px #050d1833;
  --shadow-lg:0 16px 48px #050d1866;
  --gold-dark:#ffba52;
  --gold-light:#ffd58f;
  --amber-glow:0 0 calc(13px*var(--g)) rgba(246,170,59,calc(.55*var(--g)));
  --cool-glow:0 0 calc(12px*var(--g)) rgba(106,166,232,calc(.5*var(--g)));
  --success-fill:#136746;
  --danger-fill:#a6323c;
  --accent-fill:var(--tenant-accent,#ffba52);
  --on-accent-fill:var(--tenant-on-accent,#251a07);
  --focus-ring:var(--accent-text);
  --info:var(--cool);
  --success-bg:color-mix(in srgb,var(--success) 14%,var(--surface));
  --danger-bg:color-mix(in srgb,var(--danger) 14%,var(--surface));
  --info-bg:color-mix(in srgb,var(--info) 14%,var(--surface));
  --accent-soft:color-mix(in srgb,var(--accent-fill) 16%,var(--surface));
  --font-sans:Inter,system-ui,sans-serif;
  --font-mono:'JetBrains Mono','Fira Code',monospace;
  --fs-xs:.75rem;
  --fs-sm:.8125rem;
  --fs-md:.875rem;
  --fs-lg:1rem;
  --fs-xl:1.25rem;
  --fs-2xl:1.5rem;
  --fs-display:1.75rem;
  --weight-regular:400;
  --weight-medium:500;
  --weight-semibold:600;
  --weight-bold:700;
  --leading:1.45;
  --leading-tight:1.2;
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:20px;
  --space-6:24px;
  --space-8:32px;
  --space-10:40px;
  --radius-xs:6px;
  --radius-sm:8px;
  --radius-md:11px;
  --radius-lg:14px;
  --radius-xl:18px;
  --radius-pill:999px;
  --radius-control:8px;
  --radius-card:12px;
  --radius-dialog:16px;
  --z-topbar:1000;
  --z-menu:10500;
  --z-overlay:11000;
  --z-overlay-child:11010;
  --z-auth-1:12001;
  --z-auth-2:12002;
  --z-auth-3:12003;
  --z-mark-paid:12500;
  --z-toast:13000;
  --z-help-tip:14000;
  --dur-fast:120ms;
  --dur:200ms;
  --dur-slow:320ms;
  --ease:cubic-bezier(.2,0,0,1);
  --touch-min:44px;
  --control-h:48px;
  --control-h-sm:40px;
  --control-h-xs:34px;
  --control-font:16px;
  --gutter:16px;
  --gutter-lg:24px;
  --content-max:1200px;
  --form-max:480px;
  --card-pad:var(--space-4);
  --section-gap:var(--space-4);
  --content-max-app:1440px;
  --topbar-h:56px;
  --safe-top:env(safe-area-inset-top,0px);
  --safe-right:env(safe-area-inset-right,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);
  --safe-left:env(safe-area-inset-left,0px);
  --ui-control-h:36px;
  --ui-control-h-sm:28px;
  --ui-control-font:14px;
  --ui-row-h:40px;
  --ui-card-pad:16px;
  --ui-section-gap:24px;
}

/* Legacy aliases: remove in Phase 8. Existing CSS keeps resolving through these. */
:root{
  --bg:var(--page);
  --bg1:var(--page);
  --bg2:var(--surface);
  --bg3:var(--elevated);
  --border2:var(--border-strong);
  --muted:var(--text-muted);
  --warn:var(--warning);
  --fg:var(--text);
  --fg2:var(--text-secondary);
  --fg3:var(--text-muted);
  --ok:var(--success);
  --g:.4;
  --mono:var(--font-mono);
  --display:'Space Grotesk','Inter',sans-serif;
  --portal-action:#ffba52;
  --portal-on-action:#251a07;
  --portal-good-fill:#136746;
  --portal-danger-fill:#a6323c;
  --navy-flat:#1e3a5f;
  --brand-bg:#13263f;
  /* Map graphics read these through _cv('--map-*'); saturated enough for white casing and satellite
     imagery, so they are not text colours and do not change per theme. */
  --map-danger:#b52d32;
  --map-cool:#1762a3;
  --map-success:#17804a;
  --map-accent:#9a6109;
  --map-warning:#946000;
  --map-muted:#52616e;
}

:root[data-theme="light"]{
  color-scheme:light;
  --page:#edf2f7;
  --surface:#ffffff;
  --elevated:#f3f6fa;
  --raised:#e1e9f2;
  --text:#18283b;
  --text-secondary:#3e536a;
  --text-muted:#4f657c;
  --border:#cbd7e4;
  --border-strong:#8197ae;
  --divider:#dce5ee;
  --input-bg:#ffffff;
  --input-border:#7a8ea5;
  --hover:#e8f0f8;
  --overlay:rgba(10,25,43,.5);
  --accent:var(--tenant-accent,#945900);
  --accent-2:#a34b0b;
  --accent-contrast:#ffffff;
  --accent-text:var(--tenant-accent-text,#945900);
  --cool:#1463a3;
  --purple:#7047b9;
  --success:#08734a;
  --warning:#885800;
  --danger:#b1283b;
  --on-danger:#ffffff;
  --warning-bg:#fff0cb;
  --shadow-sm:0 2px 8px #1c38500a;
  --shadow:0 8px 24px #1c385012;
  --shadow-lg:0 16px 48px #1c385026;
  --gold-dark:#945900;
  --gold-light:#945900;
  --amber-glow:0 0 calc(8px*var(--g)) rgba(200,132,31,calc(.35*var(--g)));
  --cool-glow:0 0 calc(8px*var(--g)) rgba(45,111,176,calc(.3*var(--g)));
}

/* Operator outdoor and high-contrast modes force dark; they come after light so they win. */
:root[data-outdoor="1"],
:root[data-contrast="high"]{
  color-scheme:dark;
  --page:#050505;
  --surface:#121212;
  --elevated:#1a1a1a;
  --raised:#242424;
  --text:#ffffff;
  --text-secondary:#e8e4dc;
  --text-muted:#d0ccc4;
  --border:#40546b;
  --border-strong:#607992;
  --divider:#34465b;
  --input-bg:#172434;
  --input-border:#607992;
  --hover:#2d4259;
  --overlay:rgba(5,12,22,.72);
  --accent:var(--tenant-accent,#ffba52);
  --accent-2:#ff963d;
  --accent-contrast:#251a07;
  --accent-text:var(--tenant-accent-text,#ffba52);
  --cool:#7fc5ff;
  --purple:#c4adff;
  --success:#70e0b0;
  --warning:#ffd36c;
  --danger:#ff9b9b;
  --on-danger:#211210;
  --warning-bg:#493c24;
  --shadow-sm:0 2px 8px #050d1826;
  --shadow:0 8px 24px #050d1833;
  --shadow-lg:0 16px 48px #050d1866;
  --gold-dark:#ffba52;
  --gold-light:#ffd58f;
  --amber-glow:0 0 calc(13px*var(--g)) rgba(246,170,59,calc(.55*var(--g)));
  --cool-glow:0 0 calc(12px*var(--g)) rgba(106,166,232,calc(.5*var(--g)));
}
:root[data-contrast="high"]{
  --border:#ffffff;
  --border-strong:#ffffff;
}

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

/* Responsive scale (breakpoints 480 / 768 / 1024 / 1280 only). */
@media (max-width:1024px){
  :root{
    --gutter:14px;
    --gutter-lg:18px;
  }
}
@media (max-width:768px){
  :root{
    --gutter:12px;
    --gutter-lg:16px;
    --card-pad:var(--space-3);
    --section-gap:var(--space-3);
    --control-h-sm:48px;
  }
}
@media (max-width:480px){
  :root{
    --gutter:10px;
    --radius-lg:12px;
  }
}
@media (min-width:1281px){
  :root{
    --gutter:var(--gutter-lg);
    --content-max:1280px;
  }
}
@media (pointer:coarse), (max-width:768px){
  :root{
    --ui-control-h:44px;
    --ui-control-h-sm:44px;
    --ui-control-font:16px;
    --ui-row-h:52px;
    --ui-card-pad:16px;
    --ui-section-gap:24px;
  }
}

/* Customer pages (<html data-surface="customer">) follow the device light/dark setting with a light
   fallback. An explicit data-theme always wins. Last in the file so no admin or operator page moves. */
:root[data-surface="customer"]:not([data-theme]){
  color-scheme:light;
  --page:#edf2f7;
  --surface:#ffffff;
  --elevated:#f3f6fa;
  --raised:#e1e9f2;
  --text:#18283b;
  --text-secondary:#3e536a;
  --text-muted:#4f657c;
  --border:#cbd7e4;
  --border-strong:#8197ae;
  --divider:#dce5ee;
  --input-bg:#ffffff;
  --input-border:#7a8ea5;
  --hover:#e8f0f8;
  --overlay:rgba(10,25,43,.5);
  --accent:var(--tenant-accent,#945900);
  --accent-2:#a34b0b;
  --accent-contrast:#ffffff;
  --accent-text:var(--tenant-accent-text,#945900);
  --cool:#1463a3;
  --purple:#7047b9;
  --success:#08734a;
  --warning:#885800;
  --danger:#b1283b;
  --on-danger:#ffffff;
  --warning-bg:#fff0cb;
  --shadow-sm:0 2px 8px #1c38500a;
  --shadow:0 8px 24px #1c385012;
  --shadow-lg:0 16px 48px #1c385026;
  --gold-dark:#945900;
  --gold-light:#945900;
  --amber-glow:0 0 calc(8px*var(--g)) rgba(200,132,31,calc(.35*var(--g)));
  --cool-glow:0 0 calc(8px*var(--g)) rgba(45,111,176,calc(.3*var(--g)));
}
@media (prefers-color-scheme:dark){
  :root[data-surface="customer"]:not([data-theme]){
    color-scheme:dark;
    --page:#141c27;
    --surface:#202d3d;
    --elevated:#29394c;
    --raised:#34485d;
    --text:#f2f6fc;
    --text-secondary:#c6d3e3;
    --text-muted:#a6b9ce;
    --border:#40546b;
    --border-strong:#607992;
    --divider:#34465b;
    --input-bg:#172434;
    --input-border:#607992;
    --hover:#2d4259;
    --overlay:rgba(5,12,22,.72);
    --accent:var(--tenant-accent,#ffba52);
    --accent-2:#ff963d;
    --accent-contrast:#251a07;
    --accent-text:var(--tenant-accent-text,#ffba52);
    --cool:#7fc5ff;
    --purple:#c4adff;
    --success:#70e0b0;
    --warning:#ffd36c;
    --danger:#ff9b9b;
    --on-danger:#211210;
    --warning-bg:#493c24;
    --shadow-sm:0 2px 8px #050d1826;
    --shadow:0 8px 24px #050d1833;
    --shadow-lg:0 16px 48px #050d1866;
    --gold-dark:#ffba52;
    --gold-light:#ffd58f;
    --amber-glow:0 0 calc(13px*var(--g)) rgba(246,170,59,calc(.55*var(--g)));
    --cool-glow:0 0 calc(12px*var(--g)) rgba(106,166,232,calc(.5*var(--g)));
  }
}