/**
 * Scaleupboard v2 — Design Tokens
 * ================================
 * CSS custom properties — jediný zdroj pravdy pro barvy, spacing, typography.
 *
 * Brand: Hybrid (navy primary + orange CTA).
 *   - Navy = trust, corporate, primary surface
 *   - Orange = CTA, active states, energy (sjednoceno se scaleupboard.com)
 */

:root {
  /* =============================================
   * BRAND
   * ============================================= */
  --color-brand-primary: #1A2332;          /* dark navy */
  --color-brand-primary-hover: #0D1624;
  /* CZ: Popředí NA brand-primary. Musí existovat samostatně, protože brand-primary je tmavá
         modrá v OBOU režimech (nemá dark override), kdežto `--color-text-inverse` se v dark
         režimu překlápí na tmavou — a text pak splynul s pozadím na 1:1 (tlačítko bylo vidět
         jako prázdný obdélník). Proto tenhle token zůstává světlý v obou režimech.
     EN: The foreground ON brand-primary. It must exist separately because brand-primary is dark
         navy in BOTH themes (no dark override), whereas `--color-text-inverse` flips to dark in
         dark mode — the label then merged with the background at 1:1 (the button rendered as an
         empty rectangle). Hence this token stays light in both themes. */
  --color-on-brand-primary: #FFFFFF;
  --color-brand-accent: #FF6B35;           /* orange CTA — POUZE velké/dekorativní plochy */
  --color-brand-accent-hover: #E85A24;
  --color-brand-accent-soft: #FFE8DD;      /* orange tint */
  /* CZ: „Strong" varianty accentu pro TEXT/odkazy a pozadí CTA — projdou WCAG AA 4.5:1
         na bílé (#FF6B35 = jen 2.84:1, neprojde). #C4451F = 4.98:1, bílý text na něm = 4.98:1.
     EN: "Strong" accent variants for TEXT/links and CTA backgrounds — pass WCAG AA 4.5:1 on
         white (plain #FF6B35 is only 2.84:1). #C4451F = 4.98:1; white text on it = 4.98:1. */
  --color-accent-text: #C4451F;            /* odkazy, focus (4.98:1 na bílé) */
  --color-accent-strong: #C4451F;          /* pozadí primárního CTA (bílý text = 4.98:1) */
  --color-accent-strong-hover: #A83616;

  /* =============================================
   * SCALEUPBOARD BRAND (member.scaleupboard.com)
   * =============================================
   * CZ: Barevné rodiny převzaté 1:1 z dlaždic členské sekce (radiální gradienty,
   *     radius 20 px, font Poppins). Syté odstíny jsou POUZE dekorativní (gradienty,
   *     proužky, chipy) — na text jsou tu „-text" varianty s kontrastem ≥ 4.5:1 na bílé.
   *     „-soft" jsou světlé tinty pro pozadí s tmavým textem.
   * EN: Colour families taken 1:1 from the member-portal tiles (radial gradients,
   *     20 px radius, Poppins). Saturated shades are DECORATIVE ONLY (gradients, bars,
   *     chips) — for text use the "-text" variants with ≥ 4.5:1 contrast on white.
   *     "-soft" are light tints for backgrounds with dark text. */
  --sb-lime: #92C01F;
  --sb-lime-light: #BAD671;
  --sb-lime-text: #4A6B10;
  --sb-lime-soft: #F2F8E3;
  --sb-orange: #FF8C00;
  --sb-orange-light: #ECA855;
  --sb-orange-text: #96500A;
  --sb-orange-soft: #FFF3E2;
  --sb-blue: #0092FF;
  --sb-blue-light: #67B2EB;
  --sb-blue-text: #005E9E;
  --sb-blue-soft: #E8F4FF;
  --sb-dark: #1A2332;
  --sb-dark-light: #525252;
  --sb-dark-text: #1A2332;
  --sb-dark-soft: #EFF1F4;
  /* CZ: „Brand" rodina jako chip pár (tint + text) — sytá brand oranžová `--color-brand-accent`
         (#FF6B35) na text NESMÍ (2.84:1), proto se tu drží jen dvojice pro plošky s textem.
         Vlastní tokeny (ne `--color-brand-accent-soft`/`--color-accent-text`) proto, že chip
         potřebuje dark-mode override — a ten by u sdílených tokenů rozhodil tlačítka a odkazy.
     EN: The "brand" family as a chip pair (tint + text) — the saturated brand orange
         `--color-brand-accent` (#FF6B35) must NOT carry text (2.84:1), so only the pair for
         text-on-tint lives here. Dedicated tokens (not `--color-brand-accent-soft`/
         `--color-accent-text`) because the chip needs a dark-mode override, which on the shared
         tokens would disturb buttons and links.
         Text je #A83616, ne #C4451F: na BÍLÉ má #C4451F 4.98:1, ale na tintu #FFE8DD spadne
         na 4.23:1 a propadne AA — #A83616 dává na tintu 5.56:1.
         The text is #A83616, not #C4451F: on WHITE #C4451F gives 4.98:1, but on the #FFE8DD
         tint it drops to 4.23:1 and fails AA — #A83616 yields 5.56:1 on the tint. */
  --sb-brand-text: #A83616;
  --sb-brand-soft: #FFE8DD;
  /* CZ: Gradienty dlaždic — stejné zastávky jako na member.scaleupboard.com.
     EN: Tile gradients — the same stops as on member.scaleupboard.com. */
  --gradient-sb-lime: radial-gradient(at 100% 100%, var(--sb-lime-light) 0%, var(--sb-lime) 100%);
  --gradient-sb-orange: radial-gradient(at 100% 100%, var(--sb-orange-light) 0%, var(--sb-orange) 100%);
  --gradient-sb-blue: radial-gradient(at 100% 100%, var(--sb-blue-light) 0%, var(--sb-blue) 100%);
  --gradient-sb-dark: radial-gradient(at 100% 100%, var(--sb-dark-light) 0%, var(--sb-dark) 100%);

  /* =============================================
   * TYP AKCE / EVENT TYPE (kalendář)
   * =============================================
   * CZ: Lokální dvojice barev štítku typu akce (`cms.EventType.color`). Výchozí = neutrální;
   *     třídy `.event-type-<klíč>` v `components.css` je přepisují na konkrétní rodinu
   *     (brand/lime/orange/blue/dark). Dark mode řeší podkladové tokeny samy — proto se tu
   *     nic nepřepisuje v `html.dark`.
   * EN: The local colour pair of the event-type chip (`cms.EventType.color`). Neutral by
   *     default; the `.event-type-<key>` classes in `components.css` override it with a
   *     concrete family (brand/lime/orange/blue/dark). Dark mode is handled by the underlying
   *     tokens, hence no override in `html.dark`. */
  --event-type-soft: var(--color-surface-muted);
  --event-type-text: var(--color-text-secondary);

  /* =============================================
   * SURFACES (backgrounds)
   * ============================================= */
  --color-surface-base: #FFFFFF;
  --color-surface-subtle: #F8F9FA;
  --color-surface-muted: #EFF1F4;
  --color-surface-inverse: #1A2332;
  /* CZ: Povrch hero pásu dashboardu — brand navy, ne nová barva. Text na něm vždy přes
         --color-on-brand-primary (zůstává bílý v obou režimech).
     EN: The dashboard hero band surface — brand navy, not a new colour. Text on it always
         via --color-on-brand-primary (stays white in both themes). */
  --color-surface-hero: #1A2332;
  /* CZ: Zapuštěné plochy UVNITŘ hero pásu (command bar, chipy, dráha progressu) — tmavší
         než povrch hero, aby se vstupy odlišily bez rámečků. V dark režimu je hero samo
         tmavší (#0D1624), takže inset klesá ještě o stupeň níž.
     EN: Inset surfaces INSIDE the hero band (command bar, chips, progress track) — darker
         than the hero surface so inputs stand out without borders. In dark mode the hero
         itself darkens (#0D1624), so the inset drops one more step. */
  --color-surface-hero-inset: #0D1624;
  /* CZ: Teplý nádech hero pásu: brand accent jako světlo, ne jako plocha.
     EN: The hero band's warm cast: the brand accent as light, not as a surface. */
  --gradient-hero: radial-gradient(120% 140% at 88% -10%,
                     rgba(255, 107, 53, 0.38) 0%, rgba(255, 107, 53, 0) 55%);

  /* =============================================
   * TEXT
   * ============================================= */
  --color-text-primary: #1A2332;
  --color-text-secondary: #4A5567;
  /* CZ: Ztmaveno z #8A93A4 (3.08:1 — neprojde AA) na #6B7280 (4.83:1 na bílé). Dark mode
         má vlastní override níže, kde světlejší muted na tmavém pozadí prochází.
     EN: Darkened from #8A93A4 (3.08:1 — fails AA) to #6B7280 (4.83:1 on white). Dark mode
         overrides this below, where the lighter muted passes on the dark surface. */
  --color-text-muted: #6B7280;
  --color-text-inverse: #FFFFFF;

  /* =============================================
   * BORDERS
   * ============================================= */
  --color-border-default: #E5E8EB;
  --color-border-strong: #C7CCD2;

  /* =============================================
   * SEMANTIC (success / warning / danger / info)
   * ============================================= */
  --color-success: #10B981;
  --color-success-soft: #ECFDF5;
  --color-warning: #F59E0B;
  --color-warning-soft: #FFFBEB;
  --color-danger: #EF4444;
  --color-danger-soft: #FEF2F2;
  /* CZ: Text/ikona na sytém `--color-danger` pozadí (toasty). Vždy bílá v obou režimech —
         `--color-danger` se v dark modu nemění, proto tento token NEpřepisujeme níže.
     EN: Text/icon on the saturated `--color-danger` background (toasts). Always white in both
         themes — `--color-danger` is unchanged in dark mode, so this token is NOT overridden below. */
  --color-on-danger: #FFFFFF;
  --color-info: #3B82F6;
  --color-info-soft: #EFF6FF;
  /* CZ: Tmavé „text" varianty sémantických barev pro čitelný text v alertech na světlém
         tintu (sytá barva #F59E0B/#EF4444 na *-soft dává jen ~2–3.5:1, neprojde AA). Fixní
         hodnoty — v dark modu se přepisují spolu s *-soft pozadím níže.
     EN: Dark "text" variants of semantic colors for readable alert text on the light tint
         (the saturated hue on *-soft is only ~2–3.5:1, fails AA). Fixed values — overridden
         together with the *-soft backgrounds in dark mode below. */
  --color-success-text: #065F46;
  --color-warning-text: #92400E;
  --color-danger-text:  #B91C1C;
  --color-info-text:    #1E40AF;

  /* =============================================
   * TYPOGRAPHY
   * ============================================= */
  /* CZ: Poppins = font scaleupboard.com i členské sekce (načítá se v base.html).
         Plus Jakarta Sans zůstává jako fallback pro už nacachované klienty.
     EN: Poppins = the font of scaleupboard.com and the member portal (loaded in base.html).
         Plus Jakarta Sans stays as a fallback for clients with it already cached. */
  --font-heading: Poppins, "Plus Jakarta Sans", Inter, system-ui, -apple-system, sans-serif;
  --font-body: Poppins, Inter, system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", "Fira Code", monospace;

  --text-xs: 0.75rem;       /* 12 */
  --text-sm: 0.875rem;      /* 14 */
  --text-base: 1rem;        /* 16 */
  --text-lg: 1.125rem;      /* 18 */
  --text-xl: 1.25rem;       /* 20 */
  --text-2xl: 1.5rem;       /* 24 */
  --text-3xl: 1.875rem;     /* 30 */
  --text-4xl: 2.25rem;      /* 36 */
  --text-5xl: 3rem;         /* 48 */

  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-extrabold: 800;

  --leading-tight: 1.2;
  --leading-snug: 1.4;
  --leading-normal: 1.6;
  --tracking-tight: -0.02em;
  --tracking-normal: 0;

  /* =============================================
   * SPACING (4 px base)
   * ============================================= */
  --spacing-0: 0;
  --spacing-1: 0.25rem;     /* 4 */
  --spacing-2: 0.5rem;      /* 8 */
  --spacing-3: 0.75rem;     /* 12 */
  --spacing-4: 1rem;        /* 16 */
  --spacing-5: 1.25rem;     /* 20 */
  --spacing-6: 1.5rem;      /* 24 */
  --spacing-8: 2rem;        /* 32 */
  --spacing-10: 2.5rem;     /* 40 */
  --spacing-12: 3rem;       /* 48 */
  --spacing-16: 4rem;       /* 64 */
  --spacing-20: 5rem;       /* 80 */
  --spacing-24: 6rem;       /* 96 */

  /* =============================================
   * RADII
   * ============================================= */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-full: 9999px;
  /* CZ: Radius karet widgetů — 20 px jako dlaždice na member.scaleupboard.com.
     EN: Widget card radius — 20 px like the tiles on member.scaleupboard.com. */
  --radius-widget: 20px;

  /* =============================================
   * SHADOWS
   * ============================================= */
  --shadow-sm: 0 1px 2px rgba(26, 35, 50, 0.04);
  --shadow-md: 0 4px 12px rgba(26, 35, 50, 0.08);
  --shadow-lg: 0 12px 32px rgba(26, 35, 50, 0.12);
  --shadow-xl: 0 24px 48px rgba(26, 35, 50, 0.16);
  /* CZ: Zvednutá karta widgetu — směrový stín (záporný spread), čitelnější než plošné --shadow-lg.
     EN: A lifted widget card — a directional shadow (negative spread), more legible than flat --shadow-lg. */
  --shadow-lift: 0 10px 30px -12px rgba(26, 35, 50, 0.28), 0 2px 6px rgba(26, 35, 50, 0.06);

  /* =============================================
   * LAYOUT
   * ============================================= */
  --sidebar-width: 240px;
  --sidebar-width-collapsed: 72px;
  --header-height: 64px;
  --max-content-width: 1400px;
  --max-reading-width: 72ch;

  /* =============================================
   * Z-INDEX
   * ============================================= */
  --z-dropdown: 50;
  --z-sticky: 100;
  --z-modal-backdrop: 400;
  --z-modal: 500;
  --z-popover: 600;
  --z-tooltip: 700;

  /* =============================================
   * TRANSITIONS
   * ============================================= */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
  /* CZ: Zvýrazněný přechod pro hero, zvednutí karet a vstupy plochy (redesign dashboardu).
     EN: Emphasized transition for the hero, card lifts and desk inputs (dashboard redesign). */
  --transition-emphasized: 350ms cubic-bezier(0.2, 0.8, 0.25, 1);

  /* =============================================
   * FOCUS (a11y)
   * ============================================= */
  --focus-ring: 0 0 0 3px rgba(255, 107, 53, 0.35);
  --focus-ring-error: 0 0 0 3px rgba(239, 68, 68, 0.25);
}

/* =================================================
 * DARK MODE — html.dark (toggle přes Alpine $store)
 * ================================================= */
html.dark {
  --color-surface-base: #0F1419;
  --color-surface-subtle: #1A2332;
  --color-surface-muted: #243043;
  --color-surface-inverse: #F8F9FA;

  /* CZ: V dark režimu je --color-surface-subtle také #1A2332 — hero na brand navy by splynul
         s pozadím stránky. Proto tmavší povrch (= --color-brand-primary-hover) a těžší stín.
     EN: In dark mode --color-surface-subtle is also #1A2332 — a brand-navy hero would merge
         with the page background. Hence a darker surface (= --color-brand-primary-hover)
         and a heavier shadow. */
  --color-surface-hero: #0D1624;
  --color-surface-hero-inset: #050A14;
  --shadow-lift: 0 10px 30px -12px rgba(0, 0, 0, 0.6), 0 2px 6px rgba(0, 0, 0, 0.4);

  /* CZ: SB brand v dark režimu — texty se překlápí na světlé odstíny (kontrast na tmavém
         pozadí), tinty na tmavé podklady; syté gradienty zůstávají (jsou dekorativní).
     EN: SB brand in dark mode — text flips to light shades (contrast on dark surfaces),
         tints to dark backgrounds; saturated gradients stay (they are decorative). */
  /* CZ: `-light` zastávka tmavého gradientu se zesvětluje, jinak proužek „dark" rodiny
         na tmavé kartě splyne s pozadím. Ostatní gradienty zůstávají (jsou syté).
     EN: The dark family's `-light` gradient stop lightens, otherwise its bar merges with
         the dark card background. The other gradients stay (they are saturated). */
  --sb-dark-light: #8A93A4;
  --sb-lime-text: #BAD671;
  --sb-lime-soft: #26330D;
  --sb-orange-text: #FFB454;
  --sb-orange-soft: #3A2708;
  --sb-blue-text: #67B2EB;
  --sb-blue-soft: #0D2440;
  --sb-dark-text: #C7CCD2;
  --sb-dark-soft: #243043;
  /* CZ: Brand chip pár v dark režimu — světlejší text (#FFA98A ≈ 7:1 na tmavém tintu) na
         tmavém oranžovém podkladu; světlý pastel #FFE8DD by na tmavé kartě zářil.
     EN: The brand chip pair in dark mode — lighter text (#FFA98A ≈ 7:1 on the dark tint) on a
         dark orange ground; the light pastel #FFE8DD would glare on a dark card. */
  --sb-brand-text: #FFA98A;
  --sb-brand-soft: #40190D;

  --color-text-primary: #F8F9FA;
  --color-text-secondary: #C7CCD2;
  --color-text-muted: #8A93A4;
  --color-text-inverse: #1A2332;

  --color-border-default: #324055;
  --color-border-strong: #50607A;

  /* CZ: Muted v dark modu smí být světlejší — na tmavém pozadí #6B7280 prochází slabě,
         proto #8A93A4 (5.9:1 na dark surface). EN: In dark mode muted may be lighter —
         #8A93A4 gives 5.9:1 on the dark surface. */
  --color-text-muted: #8A93A4;

  /* CZ: Alerty v dark modu — tmavá *-soft pozadí + světlý sémantický text (jinak by světlý
         text z fixních tokenů seděl na světlém pastelu = nečitelné).
     EN: Alerts in dark mode — dark *-soft backgrounds + light semantic text (otherwise the
         fixed dark text tokens would sit on a light pastel = unreadable). */
  --color-success-soft: #052E23;
  --color-warning-soft: #3A2A06;
  --color-danger-soft:  #3A0F0F;
  --color-info-soft:    #0D2440;
  --color-success-text: #6EE7B7;
  --color-warning-text: #FCD34D;
  --color-danger-text:  #FCA5A5;
  --color-info-text:    #93C5FD;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6);
}