/* Cluster web app — design tokens.
   iOS 26 / Liquid Glass inspired. Single source of truth for colour, material,
   radius, spacing, type and motion. Referenced by every screen. */

:root {
  color-scheme: dark;

  /* type — Manrope (OFL) is the brand face; the rest are generic system
     fallbacks. No proprietary platform UI faces are named. */
  --font: 'Manrope', system-ui, 'Segoe UI', Roboto, Cantarell, sans-serif;

  /* labels */
  --label: #ffffff;
  --label-2: rgba(255, 255, 255, 0.6);
  --label-3: rgba(255, 255, 255, 0.4); /* was 0.32 → 2.8:1; 0.4 clears 3:1 (CH24-R3) */

  /* accents */
  --blue: #0a84ff;
  --green: #30d158;
  --red: #ff6961;
  --amber: #ffd426;
  /* orange — the warning rung between amber-caution and red-critical (e.g. the
     licence grace-period banner). A distinct hue, not a shade of --amber. */
  --orange: #ff9f0a;
  /* extended categorical hues (inventory movement types, traffic-light dots).
     Referenced as var(--teal/--purple/--yellow) with a fallback in gen.css;
     defined here so they inherit the colour-blind palettes below too. */
  --teal: #40c8e0;
  --purple: #bf5af2;
  --yellow: #f5b942;
  /* status foregrounds: accent tones for text/borders sitting on the matching
     low-alpha tint fill (store-card / nesting status pills). Derived from the
     accents so they track every colour-blind palette automatically; the
     light-theme block darkens them for contrast on the lighter tint. */
  --blue-fg: color-mix(in srgb, var(--blue) 58%, white);
  --green-fg: color-mix(in srgb, var(--green) 72%, white);
  --orange-fg: color-mix(in srgb, var(--orange) 62%, white);

  /* separators */
  --sep: rgba(255, 255, 255, 0.1);
  /* hairline border for interactive chips/segments (segmented controls, etc.) —
     was referenced with a dark-only fallback and never defined, so it broke on
     the light theme. */
  --stroke: rgba(255, 255, 255, 0.16);

  /* Liquid Glass materials (real backdrop blur) */
  --glass-thin: rgba(255, 255, 255, 0.07);
  --glass-regular: rgba(28, 28, 34, 0.52);
  --glass-stroke: rgba(255, 255, 255, 0.12);
  --glass-spec: inset 0 1px 0 rgba(255, 255, 255, 0.14);
  --blur-thin: blur(20px) saturate(1.5);
  --blur-regular: blur(40px) saturate(1.8);

  /* Scene-light intensity striking icon/material surfaces (1 = full daylight).
     The accessibility brightness slider drives this; every WHITE specular /
     diffuse-light stop on the clay tiles scales its strength by it, so lowering
     brightness fades the reflected light physically (Blinn-Phong: the specular
     term is proportional to incident light) instead of graying the pixels. At 1
     the surfaces render exactly as designed. */
  --icon-light: 1;

  /* radius (continuous-ish) — one radius language (UI book CH31-R12/R13).
     Ladder: 3/6/10/12/14/16/18/999; big panel corners (20-28px) stay
     component-local for now. Nested boxes derive inner = outer − padding. */
  --r-xs: 3px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 12px;
  --r-xl: 14px;
  --r-2xl: 16px;
  --r-field: 18px;
  --r-capsule: 999px;

  /* motion */
  --ease-spring: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-snap: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-glide: cubic-bezier(0.25, 0.65, 0.3, 1); /* çark/ikon sürükleme fiziği */

  /* motion durations — the only sanctioned steps (UI book CH18/CH30: raw
     millisecond literals are forbidden; interaction ≤200ms, scenes ≤380ms) */
  --dur-1: 0.12s;
  --dur-2: 0.15s;
  --dur-3: 0.2s;
  --dur-4: 0.3s;
  --dur-5: 0.38s;

  /* spacing scale — 4px base (UI book CH09/CH31: 4/8/12/16 rhythm).
     New CSS must use these; legacy paddings migrate wave by wave. */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;

  /* type scale — rem-based so the fluid root + user a11y scale multiply in.
     Reality-anchored ladder (UI book CH07): every font-size on screen comes
     from one of these steps. Merges during migration stayed within ±0.6px.
     Deliberate exceptions: avatar initials (optical), display-art clamps. */
  --fs-4xs: 0.5625rem;
  --fs-3xs: 0.625rem;
  --fs-2xs: 0.72rem;
  --fs-xs: 0.75rem;
  --fs-sm: 0.8125rem;
  --fs-md: 0.875rem;
  --fs-base: 0.9375rem;
  --fs-body: 1rem;
  --fs-lg: 1.0625rem;
  --fs-xl: 1.125rem;
  --fs-2xl: 1.25rem;
  --fs-3xl: 1.375rem;
  --fs-4xl: 1.5rem;

  /* elevation ladder — tokenised shadows (UI book CH10/CH18). glass-spec
     composes on top where the material needs its inner highlight. */
  --elev-1: 0 2px 8px rgba(0, 0, 0, 0.18);
  --elev-2: 0 4px 16px rgba(0, 0, 0, 0.28);
  --elev-3: 0 14px 40px rgba(0, 0, 0, 0.35);
  --elev-4: 0 24px 60px rgba(0, 0, 0, 0.5);

  /* z-index ladder — named layers (UI book CH18: no magic stacking numbers).
     89-96 neighbourhood offsets stay literal where ordering is deliberate. */
  --z-scrim: 90;
  --z-overlay: 110;
  --z-alert: 120;
  --z-popup: 200;
  --z-tip: 300;
  --z-toast: 400;
  --z-drag: 1000;
  --z-drag-top: 4000;

  /* text painted on accent-coloured fills (buttons, badges). NOT --label:
     --label flips with the theme, on-accent must stay white on both. */
  --on-accent: #ffffff;

  /* app surface (home) */
  --surface: #0d0b16;
}

/* Görünür klavye odak halkası (UI kitap CH24-R12/CH30-R11): her etkileşimli
   öğe Tab ile gezilirken halka alır; fare tıklaması halka üretmez
   (:focus-visible). html öneki, bileşenlerdeki eski `outline: none`
   taban kurallarını özgüllükle yener. Modern motorlar outline'ı
   border-radius'a uydurur. */
html :focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

/* Screen-reader-only text (UI kitap CH24/CH25): görsel kanala eklenmeden
   programatik kanala metin taşır — toast önekleri, bağlam açıklamaları. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Theme switch must not animate: hundreds of colour transitions firing at
   once make the whole UI "float" (UI book CH30-R7). js/prefs.js adds this
   class around the attribute flip and removes it next frame. */
html.theme-switching *,
html.theme-switching *::before,
html.theme-switching *::after {
  transition: none !important;
}

/* ============================ light theme ================================
   Driven by js/prefs.js (data-theme on <html>), mirroring the desktop's
   light/dark ThemeEngine. Accessibility blocks below intentionally come
   later so HC / reading-background palettes always win over the theme. */
html[data-theme='light'] {
  color-scheme: light;
  --label: #1c1c1e;
  --label-2: rgba(28, 28, 30, 0.62);
  --label-3: rgba(28, 28, 30, 0.5); /* was 0.36 → 2.2:1; 0.5 clears 3:1 (CH24-R3) */
  --sep: rgba(0, 0, 0, 0.12);
  --stroke: rgba(0, 0, 0, 0.16);
  --glass-thin: rgba(255, 255, 255, 0.45);
  --glass-regular: rgba(255, 255, 255, 0.66);
  --glass-stroke: rgba(0, 0, 0, 0.09);
  --glass-spec: inset 0 1px 0 rgba(255, 255, 255, 0.65);
  --surface: #e9ecf5;
  /* darken the status foregrounds so they stay legible on the lighter tint */
  --blue-fg: color-mix(in srgb, var(--blue) 85%, black);
  --green-fg: color-mix(in srgb, var(--green) 80%, black);
  --orange-fg: color-mix(in srgb, var(--orange) 82%, black);
}

/* ======================= accessibility overrides ========================
   Driven by js/a11y.js via data attributes on <html>. Values mirror the
   desktop AccessibilityManager palettes exactly. */

/* font scale — every font size below is rem-based, so this scales them all.
   The root is FLUID on desktop-class viewports: a 16" laptop reports fewer
   CSS pixels than a monitor, and the same 16px is physically smaller there —
   so the base grows continuously as the viewport narrows (≥1880px wide →
   16px, ~1728px (16" defaults) → ≈16.9px, ≤1560px → 18px). The user's
   accessibility scale (--fscale) multiplies on top, untouched. */
html {
  font-size: calc(clamp(16px, 16px + (1880px - 100vw) * 0.00625, 18px) * var(--fscale, 1));
}

/* dyslexia-friendly font (family fallback chain + wider spacing) */
html[data-dyslexia='1'] {
  --font: 'OpenDyslexic', Verdana, 'Trebuchet MS', Arial, sans-serif;
}
html[data-dyslexia='1'] body {
  letter-spacing: 0.05em;
  word-spacing: 4px;
}

/* colour-blind palettes (Okabe–Ito, as on the desktop) */
html[data-cb='protanopia'],
html[data-cb='deuteranopia'] {
  --blue: #0072b2;
  --red: #d55e00;
  --amber: #e69f00;
  --green: #009e73;
  --teal: #56b4e9; /* Okabe–Ito sky blue */
  --purple: #cc79a7; /* Okabe–Ito reddish purple */
  --yellow: #f0e442; /* Okabe–Ito yellow */
  --orange: #e08214; /* ColorBrewer orange — sits between amber and vermillion-red */
}
html[data-cb='tritanopia'] {
  --blue: #332288;
  --red: #cc6677;
  --amber: #ddcc77;
  --green: #44aa99;
  --teal: #88ccee; /* Paul Tol cyan */
  --purple: #aa4499; /* Paul Tol purple */
  --yellow: #999933; /* Paul Tol olive — distinct from --amber under tritanopia */
  --orange: #ee7733; /* Paul Tol orange — lighter/redder than --amber, distinct from --red */
}

/* reading backgrounds (dark theme: warm dark variants; light theme: the
   desktop AccessibilityManager's original pastel palette, verbatim) */
html[data-rbg='peach'] {
  --surface: #2d2520;
  --glass-regular: rgba(58, 49, 43, 0.72);
  --glass-thin: rgba(58, 49, 43, 0.5);
}
html[data-rbg='orange'] {
  --surface: #2d2a1c;
  --glass-regular: rgba(58, 54, 40, 0.72);
  --glass-thin: rgba(58, 54, 40, 0.5);
}
html[data-rbg='yellow'] {
  --surface: #2d2d1e;
  --glass-regular: rgba(58, 58, 42, 0.72);
  --glass-thin: rgba(58, 58, 42, 0.5);
}
html[data-theme='light'][data-rbg='peach'] {
  --surface: #f5e6d3;
  --glass-regular: rgba(250, 240, 226, 0.8);
  --glass-thin: rgba(250, 240, 226, 0.55);
}
html[data-theme='light'][data-rbg='orange'] {
  --surface: #f0e4c8;
  --glass-regular: rgba(247, 238, 214, 0.8);
  --glass-thin: rgba(247, 238, 214, 0.55);
}
html[data-theme='light'][data-rbg='yellow'] {
  --surface: #f5f0c8;
  --glass-regular: rgba(250, 246, 214, 0.8);
  --glass-thin: rgba(250, 246, 214, 0.55);
}
/* user-picked reading colour (eyedropper / palette): the chosen --reading-bg IS
   the reading surface; glass layers are translucent versions of it. Applies in
   both themes — the user owns the choice. */
html[data-rbg='custom'] {
  --surface: var(--reading-bg, #f5e6d3);
  --glass-regular: color-mix(in srgb, var(--reading-bg, #f5e6d3) 82%, transparent);
  --glass-thin: color-mix(in srgb, var(--reading-bg, #f5e6d3) 55%, transparent);
}

/* high contrast — translucency and decoration give way to hard surfaces.
   Only "light" exists: the "dark" mode was removed from the accessibility
   panel (a persisted "dark" now maps to "light" in a11y.js), so its palette
   block is gone with it. EVERY accent token is redefined here — this block
   sits after the colour-blind palettes, so under HC the contrast-tuned hue
   always wins (an accent legible on a dark tint is not legible on the forced
   white surface). All values ≥ ~6:1 on #ffffff / #f0f0f0, hues kept apart. */
html[data-hc='light'] {
  color-scheme: light;
  --surface: #ffffff;
  --label: #000000;
  --label-2: #333333;
  --label-3: #666666;
  --blue: #0000ee;
  --red: #cc0000;
  --green: #006600;
  --orange: #8f3600; /* burnt orange — between --red and --amber */
  --amber: #7a5200; /* dark gold */
  --teal: #005f66;
  --purple: #663399;
  --yellow: #525c00; /* olive — a "yellow" must go dark to survive white */
  /* status foregrounds: the tint fills are near-white here, so the darkest
     legible tone IS the accent itself — no mix toward white/black. */
  --blue-fg: var(--blue);
  --green-fg: var(--green);
  --orange-fg: var(--orange);
  --sep: #000000;
  --stroke: #000000;
  --glass-thin: #f0f0f0;
  --glass-regular: #f0f0f0;
  --glass-stroke: #000000;
  --glass-spec: none;
}

/* reduced motion — kill animation and transitions outright */
html[data-rm='1'] *,
html[data-rm='1'] *::before,
html[data-rm='1'] *::after {
  animation: none !important;
  transition: none !important;
}

/* OS-level reduce-motion (UI kitap CH24-R15/CH13): kullanıcı app-içi ayara
   dokunmamış olsa bile işletim sistemi tercihi vestibüler güvenlik gereği
   aynı kill-switch'i uygular. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* İçeriğe atla bağlantısı (UI kitap CH24-R14): görünmez durur, Tab ile
   odaklanınca üstten iner. */
.skip-link {
  position: fixed;
  top: -100px;
  left: 12px;
  z-index: var(--z-drag-top);
  padding: 10px 16px;
  border-radius: var(--r-capsule);
  background: var(--blue);
  color: var(--on-accent);
  font: 600 var(--fs-md)/1 var(--font);
  text-decoration: none;
  transition: top var(--dur-2) ease;
}
.skip-link:focus-visible {
  top: 12px;
}

/* h1 landmark'ları mevcut sınıf tipografisini korur (UA marjı sıfırlanır) */
h1.nav-title,
h1.brand-word {
  margin: 0;
}

/* Seçim vurgusu markalı (UI kitap CH31): tema-farkında, token'dan */
::selection {
  background: color-mix(in srgb, var(--blue) 32%, transparent);
  color: var(--label);
}