/* ==========================================================================
   Kladionica 2026 redesign — design-token foundation
   Source of truth: ~/Downloads/design_handoff_kladionica_2026/ (Claude Design
   handoff, 57 screens). Extracted 2026-07-19 from color/type/radius/shadow
   frequency analysis across all four canvas files.

   Rules (see CLAUDE.md §3):
   - Every migrated/new style uses these variables — no raw hex in new CSS.
   - New classes are prefixed `kl-` so legacy globals (style-15.css) can't
     collide with them.
   - This file defines variables only. It must never emit a rule that paints
     anything — loading it site-wide is a visual no-op until components opt in.
   ========================================================================== */

:root {
  /* --- Ink & text (dark → light) ------------------------------------- */
  --kl-ink: #14171C;            /* headings, primary numbers, active nav */
  --kl-text: #3A4048;           /* body copy (normalizes design's 3A4048/3A3F46) */
  --kl-text-2: #6E757E;         /* secondary text, inactive nav, labels */
  --kl-text-3: #8B929B;         /* muted meta (kickers, timestamps) */
  --kl-text-4: #9AA1AA;         /* faint meta, placeholder, column headers */
  --kl-text-disabled: #B4BAC1;  /* disabled, "SPONZORISANO" tier */

  /* --- Surfaces ------------------------------------------------------- */
  --kl-bg: #F2F3F5;             /* page background */
  --kl-surface: #FFFFFF;        /* cards, sheets, table rows */
  --kl-surface-2: #FAFBFC;      /* callout / table-header / soft panel */
  --kl-surface-3: #F4F5F7;      /* chips, active TOC item, skeleton base */
  --kl-surface-4: #EEF0F2;      /* avatar bg, pressed chip */

  /* --- Borders & dividers --------------------------------------------- */
  --kl-border: #E7E9EC;         /* default card/control border */
  --kl-border-strong: #DDE0E4;  /* emphasized control border (buttons) */
  --kl-divider: #F0F1F3;        /* hairline row separators */
  --kl-divider-2: #ECEDEF;      /* header/nav section borders (a step above hairline) */
  --kl-bar-empty: #E5E8EB;      /* muted / empty bar segment (prognoze bars) */
  --kl-logo-ph: #E2E5E8;        /* bookmaker-logo placeholder box in odds chips */

  /* --- Brand & action -------------------------------------------------- */
  /* Owner decision 2026-07-19: the site keeps its original header — the
     legacy blue gradient, white logo and legacy primary tint carry over. */
  --kl-header-bg: linear-gradient(88deg, #046DF6 0%, #368BF9 100%);
  --kl-header-text: rgba(255, 255, 255, 0.9);
  --kl-primary-legacy: #1756D4;

  --kl-blue: #0769DE;           /* primary action, links, section badges */
  --kl-blue-soft: #BBD3F5;      /* light-blue accents on white */
  --kl-blue-tint: #F2F7FE;      /* unread row / selected row background */
  --kl-navy: #021731;           /* dark surface (hero / navy bars) */
  --kl-navy-text: #9BAABD;      /* secondary text on navy */
  --kl-navy-text-2: #AABACF;    /* lighter text on navy */

  /* --- Semantic (sport outcomes use these, and ONLY these) ------------ */
  --kl-green: #177A4E;          /* win / positive / profit */
  --kl-green-tint: #EBF4EF;     /* win row/badge background */
  --kl-red: #C0453C;            /* loss / negative / LIVE pulse */
  --kl-red-tint: #F9EEED;      /* loss row/badge background */
  --kl-red-light: #FF6B60;      /* live pulse dot on dark/blue fills (7a) */
  --kl-amber: #C2951F;          /* draw / caution text */
  --kl-amber-bright: #E8B92E;   /* draw dot / star accents */
  --kl-amber-tint: #FBF7EC;     /* draw / caution row background */
  --kl-amber-notice-border: #EAD9A8; /* first-analysis notice border (8d) */
  --kl-amber-notice-text: #7A6420;   /* first-analysis notice text (8d) */
  --kl-online: #2E9E5B;         /* live presence dot / "online" / chat status */
  --kl-online-tint: #E8F6EE;    /* "N online" pill background (12f) */

  /* --- On-dark foreground (text/icons/borders on navy, blue, pitch) --- */
  --kl-on-dark: #FFFFFF;

  /* --- Match pitch (Ekipe lineups) — design 3d pale panel + hairline ---- */
  --kl-pitch: #F1F6F2;
  --kl-pitch-stripe: #F1F6F2;                    /* legacy alias, same panel */
  --kl-pitch-line: #DDE6DF;                      /* halfway line + circle */
  --kl-pitch-num: #FFFFFF;                       /* shirt numbers on navy */

  /* --- Typography ------------------------------------------------------ */
  /* Both families are already loaded site-wide via includes/head.php.     */
  --kl-font-ui: Inter, -apple-system, sans-serif;            /* 400/500/600/700 */
  --kl-font-display: 'Red Hat Display', sans-serif;          /* 500/600/700/800: headings, odds, brand */

  /* Size ladder observed in the handoff (UI sizes; component CSS picks
     per-breakpoint — mobile h1 27px vs desktop h1 42px is a component
     decision, not a token). */
  --kl-fs-10: 10px;   /* kickers, letterspaced labels */
  --kl-fs-11: 11px;   /* meta, column headers */
  --kl-fs-12: 12px;   /* dense UI text */
  --kl-fs-13: 13px;   /* standard UI text */
  --kl-fs-14: 14px;   /* body (mobile) */
  --kl-fs-15: 15px;   /* emphasized UI, odds */
  --kl-fs-16: 16px;   /* body (desktop) */
  --kl-fs-17: 17px;   /* h3 / card titles */
  --kl-fs-19: 19px;   /* h2 mobile */
  --kl-fs-22: 22px;   /* large numbers */
  --kl-fs-27: 27px;   /* h1 mobile */
  --kl-fs-34: 34px;   /* hero numbers */
  --kl-fs-42: 42px;   /* h1 desktop */

  --kl-lh-tight: 1.15;  /* headings */
  --kl-lh-ui: 1.35;     /* card titles, chips */
  --kl-lh-body: 1.6;    /* article body */

  --kl-ls-kicker: 0.12em;  /* uppercase kickers/labels */
  --kl-ls-heading: -0.015em;

  /* --- Radii (ladder used by the designs, 1:1) ------------------------- */
  --kl-r-4: 4px;    /* tiny chips, mini badges */
  --kl-r-6: 6px;    /* small badges, code chips */
  --kl-r-8: 8px;    /* odds pills, inline blocks */
  --kl-r-10: 10px;  /* buttons, small cards */
  --kl-r-12: 12px;  /* inner cards, callout blocks */
  --kl-r-14: 14px;  /* notes, list cards */
  --kl-r-16: 16px;  /* standard content cards */
  --kl-r-20: 20px;  /* desktop page frame */
  --kl-r-24: 24px;  /* large mobile cards / sheets */
  --kl-r-pill: 999px;

  /* --- Elevation ------------------------------------------------------- */
  --kl-shadow-card: 0 12px 32px rgba(20, 23, 28, 0.07);
  --kl-shadow-sm: 0 1px 3px rgba(20, 23, 28, 0.08);
  --kl-shadow-sheet: 0 -8px 30px rgba(20, 23, 28, 0.16); /* bottom sheets */
  --kl-shadow-text: 0 1px 2px rgba(0, 0, 0, 0.5);        /* legibility on images/pitch */

  /* --- Spacing (4px base grid) ----------------------------------------- */
  --kl-sp-2: 2px;
  --kl-sp-4: 4px;
  --kl-sp-6: 6px;
  --kl-sp-8: 8px;
  --kl-sp-10: 10px;
  --kl-sp-12: 12px;
  --kl-sp-14: 14px;
  --kl-sp-16: 16px;
  --kl-sp-20: 20px;
  --kl-sp-24: 24px;
  --kl-sp-28: 28px;
  --kl-sp-32: 32px;
  --kl-sp-40: 40px;
  --kl-sp-48: 48px;

  /* --- Motion ----------------------------------------------------------- */
  --kl-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --kl-dur-short: 150ms;
  --kl-dur-medium: 200ms;

  /* --- Chat / composer palette (promoted from chat.php so the shared
     message composer can use them on every page) ------------------------- */
  --chat-primary: #0769de;
  --chat-ink: #14171C;
  --chat-muted: #6E757E;
  --chat-faint: #9AA1AA;
  --chat-bg: #FAFBFC;
  --chat-surface: #FFFFFF;
  --chat-surface-2: #F4F5F7;
  --chat-border: #E7E9EC;
  --chat-divider: #ECEDEF;
  --chat-online: #2E9E5B;
  --chat-online-tint: #E8F6EE;
  --chat-shadow: 0 18px 45px rgba(20, 23, 28, 0.14);
}

/* Breakpoint contract (CSS variables can't hold media queries — keep in sync
   by convention): mobile-first; desktop layout at min-width: 1024px, content
   max-width 1360px per the desktop canvases. */

/* ── Legacy palette aliases from css/style-15.css's parallel :root (moved
   here in CSS-PLAN Step 8 Wave 3; new code uses the --kl-* tokens above). ── */
:root {
    --blue: #316cb4;
    --blueLight: #5D8CD7;
    --blueDark: #283B5A;
    --white: #ffffff;
    --white-10: rgba(255, 255, 255, 0.1);
    --white-80: rgba(255, 255, 255, 0.8);
    --white-90: rgba(255, 255, 255, 0.9);
    --titleText: #1C1B1F;
    --bodyText: #5F5F5F;
    --blueText: #6F8CAA;
    --success: #54C273;
    --warning: #ff9f45;
    --green: #40AF7B;
    --Grey: #cedaea;
    --statGrey: #DFE4EC;
    --boxGrey: #F1F3F7;
    --lightGrey: #F5F6F7;
    --mediumGrey: #B9C4D2;
    --darkGrey: #7C848E;
    --lightBlue: #E9F1FC;
    --mediumBlue: #EBF0F8;
    --primary: #1756D4;
    --primaryAlt: #0769de;
    --error: #D23D3D;
    --shadow-blue: 0 3px 6px #1a31501a;
    --shadowButton: 0 5px 10px #1a31500d;
    --shadowCard: 0px 3px 6px rgba(39, 39, 39, 0.1);
    --color-primary: var(--primaryAlt);
    --color-primary-strong: var(--primary);
    --color-surface: var(--white);
    --color-surface-muted: var(--lightGrey);
    --color-text: var(--bodyText);
    --color-heading: var(--titleText);
    --color-border: rgba(150, 150, 150, 0.5);
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 12px;
    --space-base: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;
    --radius-default: 8px;
    --radius-card: 12px;
    --motion-easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
    --motion-duration-short: 150ms;
    --motion-duration-medium: 200ms;
    --motion-duration-long: 250ms;
  }