/* =====================================================================================================
   Israel Cycling Federation POC - design tokens
   Concept: the precision of race timing + Israeli light. See design/ui/UI_DESIGN.md for the rationale,
   contrast table and usage rules. Components use these tokens only - never raw hex values.
   ===================================================================================================== */
:root {
  /* ---- Core palette ------------------------------------------------------------------------------ */
  --c-night: #0A1530;          /* Night Ride: landing stage, dark bands, footer */
  --c-night-2: #111E3F;        /* raised surface on night */
  --c-night-3: #1B2A52;        /* hairlines / hover on night */
  --c-chalk: #F5F6F8;          /* page canvas */
  --c-chalk-2: #ECEEF2;        /* pressed / track backgrounds on chalk */
  --c-white: #FFFFFF;          /* surfaces */
  --c-ink: #0F1C33;            /* primary text (17:1 on white) */
  --c-ink-2: #4A5875;          /* secondary text (7.1:1 on white, 6.6:1 on chalk) */
  --c-ink-3: #677189;          /* tertiary text, meta (4.9:1 on white, 4.5:1 on chalk) */
  --c-on-night: #FFFFFF;
  --c-on-night-2: rgba(255, 255, 255, 0.72);   /* 9.6:1 on night */
  --c-on-night-3: rgba(255, 255, 255, 0.6);    /* 7:1 on night - small print only */

  /* Sprint Orange: the ONE primary action colour (sign-up, primary buttons, selected state) */
  --c-orange: #FF5A1F;
  --c-orange-hover: #FF7140;
  --c-orange-press: #F0490D;
  --c-orange-ink: #C73400;     /* orange text on light (5.4:1) */
  --c-orange-tint: #FFEBE4;
  --c-on-orange: #0A1530;      /* navy text on orange: 5.8:1 (white would be 3.1:1) */

  /* Velodrome Cyan: secondary accent - glow on dark, focus on dark, data highlight */
  --c-cyan: #19C2E6;           /* 8.5:1 on night; never as text on light */
  --c-cyan-ink: #10788F;
  --c-cyan-tint: #E3F8FC;

  /* Negev Sand: podium and warnings, sparingly */
  --c-sand: #E8B04A;
  --c-sand-ink: #936613;
  --c-sand-tint: #FCF6E9;

  /* Status */
  --c-success: #1FA463;
  --c-success-ink: #177B4A;
  --c-success-tint: #E4F4EC;
  --c-danger: #E5484D;
  --c-danger-ink: #D01E23;     /* also the destructive button background (white text 5.4:1) */
  --c-danger-tint: #FCE9EA;

  /* Medals */
  --c-gold: #E8B04A;
  --c-silver: #AEB8C4;
  --c-bronze: #C98B5B;

  /* Brand mark (the federation's logo colours - logo only, never UI) */
  --c-brand-green: #8CC53D;
  --c-brand-blue: #1175BB;

  /* Tones used on Night Ride surfaces */
  --c-night-deep: #060D1F;
  --c-night-mid: #0C1A3B;
  --c-success-on-night: #4ADE9B;   /* 11:1 on night */
  --c-danger-on-night: #FF9A9D;    /* 8.9:1 on night */
  --c-danger-press: #B8171C;
  --c-shimmer: #F9FAFB;

  /* Lines */
  --c-line: rgba(15, 28, 51, 0.1);            /* decorative hairlines */
  --c-line-2: rgba(15, 28, 51, 0.16);         /* stronger separators */
  --c-line-strong: #79869D;                   /* form control borders (3.6:1 on white, 3.3:1 on chalk) */
  --c-line-night: rgba(255, 255, 255, 0.12);

  /* ---- Discipline / event-kind palette (always paired with a text label or icon) -------------------
     base = map pins, dots and bars; ink = text on light (AA); tint = badge background. */
  --d-road: #2F6BFF;     --d-road-ink: #1357FF;     --d-road-tint: #E6EDFF;
  --d-itt: #0EA5A4;      --d-itt-ink: #0A7878;      --d-itt-tint: #E2F4F4;
  --d-xco: #2BB673;      --d-xco-ink: #1D7C4F;      --d-xco-tint: #E6F6EE;   /* XCO, XCC, XCM (MTB) */
  --d-enduro: #E5484D;   --d-enduro-ink: #D01E23;   --d-enduro-tint: #FCE9EA;
  --d-gravel: #D4A23C;   --d-gravel-ink: #8B681F;   --d-gravel-tint: #FAF4E8;
  --d-cx: #A0703F;       --d-cx-ink: #8C6237;       --d-cx-tint: #F4EEE8;
  --d-track: #8B5CF6;    --d-track-ink: #7841F5;    --d-track-tint: #F1EBFE;
  --d-pump: #6366F1;     --d-pump-ink: #5054EF;     --d-pump-tint: #ECEDFD;
  --d-bmx: #F43F5E;      --d-bmx-ink: #D30C2E;      --d-bmx-tint: #FEE8EC;
  --d-course: #EC4899;   --d-course-ink: #CD1570;   --d-course-tint: #FDE9F3;
  --d-external: #8A94A6; --d-external-ink: #626D81; --d-external-tint: #F1F2F4;

  /* ---- Semantic roles ------------------------------------------------------------------------------ */
  --bg-page: var(--c-chalk);
  --bg-surface: var(--c-white);
  --bg-sunken: var(--c-chalk-2);
  --text: var(--c-ink);
  --text-2: var(--c-ink-2);
  --text-3: var(--c-ink-3);
  --link: var(--c-ink);
  --focus-ring-light: #0B7490; /* 5.4:1 on white */
  --focus-ring: var(--focus-ring-light);  /* switches to cyan on dark surfaces */
  --selection: rgba(25, 194, 230, 0.28);

  /* ---- Typography ---------------------------------------------------------------------------------- */
  --font-display: 'Karantina', 'IBM Plex Sans Hebrew', 'Arial Hebrew', Arial, sans-serif;
  --font-text: 'IBM Plex Sans Hebrew', 'Segoe UI', 'Arial Hebrew', Arial, system-ui, sans-serif;

  --fs-12: 0.75rem;
  --fs-13: 0.8125rem;
  --fs-14: 0.875rem;
  --fs-15: 0.9375rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-22: 1.375rem;
  --fs-24: 1.5rem;
  --fs-28: 1.75rem;
  --fs-h2: clamp(1.5rem, 1.3rem + 0.8vw, 1.875rem);        /* 24 -> 30 */
  --fs-h3: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);      /* 18 -> 20 */
  --fs-lead: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);     /* 17 -> 20 */
  /* Karantina display sizes */
  --fs-display: clamp(2.75rem, 1.6rem + 4.6vw, 6rem);      /* page titles: 44 -> 96 */
  --fs-display-sm: clamp(2.5rem, 1.9rem + 2.4vw, 4rem);    /* dialog heroes, 404 bib: 40 -> 64 */
  --fs-figure-xl: clamp(3rem, 2.2rem + 3.2vw, 5rem);       /* big stat figures */
  --fs-figure: clamp(2.25rem, 1.9rem + 1.4vw, 3rem);       /* stat tiles, places: 36 -> 48 */
  --fs-figure-sm: 2rem;                                    /* date-block day numbers, table places */

  --lh-tight: 1.15;
  --lh-snug: 1.35;
  --lh-body: 1.6;
  --lh-display: 0.92;

  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* ---- Spacing (4 / 8 scale) ----------------------------------------------------------------------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 32px;
  --s-8: 40px;
  --s-9: 48px;
  --s-10: 64px;
  --s-11: 80px;
  --s-12: 96px;
  --s-13: 128px;
  --section-gap: clamp(64px, 3.5rem + 4vw, 128px);
  --block-gap: clamp(32px, 1.5rem + 2vw, 56px);

  /* ---- Layout -------------------------------------------------------------------------------------- */
  --container: 1200px;
  --container-wide: 1360px;
  --container-text: 720px;
  --gutter: 16px;
  --header-h: 72px;
  --header-h-compact: 60px;
  --header-h-current: var(--header-h);
  --tap: 44px;                 /* minimum touch target */

  /* ---- Radii (by hierarchy) ------------------------------------------------------------------------ */
  --r-xs: 6px;                 /* badges, tags */
  --r-sm: 10px;                /* inputs, buttons, chips-in-tables */
  --r-md: 14px;                /* rows, small cards, menus' items */
  --r-lg: 18px;                /* panels, dropdowns */
  --r-xl: 22px;                /* dialogs, sheets */
  --r-pill: 999px;             /* primary buttons, chips */

  /* ---- Elevation: one navy-tinted 3-level scale ---------------------------------------------------- */
  --shadow-1: 0 1px 2px rgba(10, 21, 48, 0.06), 0 2px 8px -2px rgba(10, 21, 48, 0.08);
  --shadow-2: 0 14px 36px -14px rgba(10, 21, 48, 0.24), 0 4px 12px -4px rgba(10, 21, 48, 0.1);
  --shadow-3: 0 36px 90px -24px rgba(10, 21, 48, 0.5), 0 14px 32px -14px rgba(10, 21, 48, 0.22);
  --scrim: rgba(6, 13, 31, 0.56);

  /* ---- Z-index scale ------------------------------------------------------------------------------- */
  --z-raised: 10;
  --z-sticky: 100;
  --z-header: 200;
  --z-dropdown: 300;
  --z-drawer: 400;
  --z-dialog: 600;
  --z-toast: 700;
  --z-skip: 800;
  --z-boot: 900;

  /* ---- Motion -------------------------------------------------------------------------------------- */
  --dur-1: 120ms;              /* colour / hover */
  --dur-2: 180ms;              /* exits, small state changes */
  --dur-3: 240ms;              /* standard enter */
  --dur-4: 320ms;              /* panels, drawers, sheets */
  --dur-5: 450ms;              /* large: the title line-scan, list cross-fades */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* ---- Icons --------------------------------------------------------------------------------------- */
  --icon-sm: 16px;
  --icon-md: 20px;
  --icon-lg: 24px;

  color-scheme: light;
}

@media (min-width: 768px) {
  :root { --gutter: 24px; }
}
@media (min-width: 1200px) {
  :root { --gutter: 32px; }
}

/* Dark surfaces re-map the semantic roles, so components placed on them adapt automatically. */
.on-night {
  --bg-surface: var(--c-night-2);
  --text: var(--c-on-night);
  --text-2: var(--c-on-night-2);
  --text-3: var(--c-on-night-3);
  --link: var(--c-on-night);
  --focus-ring: var(--c-cyan);
  --c-line: var(--c-line-night);
  --c-line-2: rgba(255, 255, 255, 0.2);
  --c-line-strong: rgba(255, 255, 255, 0.45);
  color: var(--text);
  color-scheme: dark;
}