/* Design tokens — SimplyWall.st-inspired dark mode + CLAUDE.md compliance.
   Default = dark; light theme available via .theme-light override. Strict
   8px grid. Health palette (good/fair/bad) for metric pills. */

:root {
  /* ─── Brand: vibrant teal (SWS „good" snowflake) + cobalt secondary ─── */
  --c-primary-50:  #d6fff3;
  --c-primary-100: #a8f7df;
  --c-primary-200: #6dedc6;
  --c-primary-300: #3fdfb1;
  --c-primary-400: #20d2a1;
  --c-primary-500: #00d4aa;          /* SWS „good" teal — primary CTA */
  --c-primary-600: #00b894;
  --c-primary-700: #00997a;
  --c-primary-800: #00795f;
  --c-primary-900: #005a47;

  /* Sekundární akcent — cobalt (data/info) */
  --c-accent-400: #5b8cff;
  --c-accent-500: #3d6cff;
  --c-accent-600: #2a52d4;

  /* ─── Health palette (SWS „snowflake" pills — good/fair/poor/bad) ─── */
  --c-health-good:    #00d4aa;       /* teal */
  --c-health-good-bg: rgba(0, 212, 170, .14);
  --c-health-fair:    #ffa726;       /* amber */
  --c-health-fair-bg: rgba(255, 167, 38, .14);
  --c-health-poor:    #ff7043;       /* coral */
  --c-health-poor-bg: rgba(255, 112, 67, .14);
  --c-health-bad:     #ef4f6e;       /* hot pink-red */
  --c-health-bad-bg:  rgba(239, 79, 110, .14);
  --c-health-neutral:    #7d8aa1;
  --c-health-neutral-bg: rgba(125, 138, 161, .14);

  /* ─── Sémantické (success / warning / error / info) ─── */
  --c-success:    var(--c-health-good);
  --c-success-bg: var(--c-health-good-bg);
  --c-warning:    var(--c-health-fair);
  --c-warning-bg: var(--c-health-fair-bg);
  --c-error:      var(--c-health-bad);
  --c-error-bg:   var(--c-health-bad-bg);
  --c-info:       var(--c-accent-500);
  --c-info-bg:    rgba(61, 108, 255, .14);

  /* ─── Pozadí & text (dark-first, SWS deep navy) ─── */
  --c-bg:         #0a0e1a;            /* page background — deep midnight navy */
  --c-bg-elev:    #131826;            /* karty (1 vrstva nad bg) */
  --c-bg-elev-2:  #1a2032;            /* hovered / nested */
  --c-bg-soft:    #161c2c;            /* sekundární plochy, inputs */
  --c-fg:         #ecf0f8;            /* primární text — off-white s lehkým modrým nádechem */
  --c-fg-strong:  #ffffff;            /* high-contrast hlavička */
  --c-fg-muted:   #8a94a8;            /* sekundární, popisky */
  --c-fg-faint:   #5f697d;            /* terciární / placeholder */
  --c-border:        rgba(255, 255, 255, .06);
  --c-border-strong: rgba(255, 255, 255, .12);

  /* Pro back-compat ponecháváme šedé tokeny — používané v některých místech */
  --c-neutral-0:   #ffffff;
  --c-neutral-25:  #f7f8fb;
  --c-neutral-50:  #eef0f6;
  --c-neutral-100: #d8dde8;
  --c-neutral-200: #b9c0d0;
  --c-neutral-300: #8a94a8;
  --c-neutral-400: #5f697d;
  --c-neutral-500: #404a5e;
  --c-neutral-600: #2a3245;
  --c-neutral-700: #1f2535;
  --c-neutral-800: #161c2c;
  --c-neutral-900: #0a0e1a;

  /* ─── Stíny — 3D depth + subtle teal glow on focus ─── */
  --shadow-xs: 0 0 0 1px rgba(255, 255, 255, .04);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35), 0 0 0 1px rgba(255, 255, 255, .04);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, .35), 0 0 0 1px rgba(255, 255, 255, .05);
  --shadow-lg: 0 24px 64px rgba(0, 0, 0, .55), 0 4px 16px rgba(0, 0, 0, .35);
  --shadow-glow:        0 0 0 3px rgba(0, 212, 170, .35);
  --shadow-glow-info:   0 0 0 3px rgba(61, 108, 255, .35);
  --shadow-glow-bad:    0 0 0 3px rgba(239, 79, 110, .30);

  /* ─── 8px grid (CLAUDE.md) — base 8px s 4px polovinou ─── */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;

  /* Rádius — sharper, less pillowy than Apple */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 18px;
  --r-2xl: 24px;
  --r-full: 9999px;

  /* Easing */
  --ease-out:    cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.4, 0, .2, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);   /* pro hover-up / scale-1.05 */
  --t-fast: 150ms;
  --t-mid:  280ms;
  --t-slow: 420ms;

  /* Mřížka šířek */
  --container-max: 1320px;

  /* Mesh gradient pozadí (SVG, very low opacity) – referencováno z layout.css */
  --mesh-blob-1: rgba(0, 212, 170, .08);
  --mesh-blob-2: rgba(61, 108, 255, .07);
  --mesh-blob-3: rgba(239, 79, 110, .05);
}

/* ─── Light theme override (jen když uživatel explicitně přepne) ─── */
:root.theme-light {
  --c-bg:        #f7f8fb;
  --c-bg-elev:   #ffffff;
  --c-bg-elev-2: #f0f2f8;
  --c-bg-soft:   #eef0f6;
  --c-fg:        #0a0e1a;
  --c-fg-strong: #000000;
  --c-fg-muted:  #5f697d;
  --c-fg-faint:  #8a94a8;
  --c-border:        rgba(10, 14, 26, .07);
  --c-border-strong: rgba(10, 14, 26, .14);

  --shadow-xs: 0 0 0 1px rgba(10, 14, 26, .04);
  --shadow-sm: 0 1px 3px rgba(10, 14, 26, .06), 0 0 0 1px rgba(10, 14, 26, .04);
  --shadow-md: 0 4px 16px rgba(10, 14, 26, .07), 0 0 0 1px rgba(10, 14, 26, .04);
  --shadow-lg: 0 24px 56px rgba(10, 14, 26, .10), 0 4px 12px rgba(10, 14, 26, .06);
  --shadow-glow: 0 0 0 3px rgba(0, 212, 170, .25);

  --mesh-blob-1: rgba(0, 212, 170, .06);
  --mesh-blob-2: rgba(61, 108, 255, .05);
  --mesh-blob-3: rgba(239, 79, 110, .04);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--c-bg);
  color: var(--c-fg);
  /* CLAUDE.md: žádný Inter / Roboto. Cal Sans pro display, Geist Sans pro UI. */
  font-family:
    'Geist Sans', -apple-system, BlinkMacSystemFont,
    'Segoe UI Variable Display', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'cv11', 'ss01';
  /* Plynulá tranzice mezi tématy */
  transition: background var(--t-mid) var(--ease-out), color var(--t-mid) var(--ease-out);
}

/* CLAUDE.md text-balance pro display headings */
@supports (text-wrap: balance) {
  .display, .h2, .h3 { text-wrap: balance; }
}

/* Scrollbar sladěný s tématem */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--c-bg-elev-2);
  border-radius: var(--r-full);
  border: 2px solid var(--c-bg);
}
::-webkit-scrollbar-thumb:hover { background: var(--c-neutral-500); }

::selection {
  background: rgba(0, 212, 170, .25);
  color: var(--c-fg-strong);
}