/* Self-hosted fonts (SIL Open Font License 1.1, see /fonts/OFL.txt): Nunito for headings, Nunito Sans for text and
   numbers (brand guidelines). Latin + Latin Extended (Turkish ı, ş, ğ). Generated from @fontsource; no Google servers. */

/* nunito-latin-ext-700-normal */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/fonts/nunito-latin-ext-700-normal.woff2) format('woff2');
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
    U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* nunito-latin-700-normal */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/fonts/nunito-latin-700-normal.woff2) format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* nunito-latin-ext-800-normal */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-display: swap;
  font-weight: 800;
  src: url(/fonts/nunito-latin-ext-800-normal.woff2) format('woff2');
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
    U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* nunito-latin-800-normal */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-display: swap;
  font-weight: 800;
  src: url(/fonts/nunito-latin-800-normal.woff2) format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* nunito-sans-latin-ext-400-normal */
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/fonts/nunito-sans-latin-ext-400-normal.woff2) format('woff2');
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
    U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* nunito-sans-latin-400-normal */
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/fonts/nunito-sans-latin-400-normal.woff2) format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* nunito-sans-latin-ext-700-normal */
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/fonts/nunito-sans-latin-ext-700-normal.woff2) format('woff2');
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
    U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* nunito-sans-latin-700-normal */
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/fonts/nunito-sans-latin-700-normal.woff2) format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* nunito-sans-latin-ext-800-normal */
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 800;
  src: url(/fonts/nunito-sans-latin-ext-800-normal.woff2) format('woff2');
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
    U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* nunito-sans-latin-800-normal */
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 800;
  src: url(/fonts/nunito-sans-latin-800-normal.woff2) format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/*
 * kitecast design tokens (batch 7). Source of truth: brand/colors/design-tokens.json and brand/BRAND-GUIDELINES.md.
 * Components use only these variables (a test checks styles for stray colour literals). Dark is the default theme;
 * <html data-theme="light"> switches (Settings → Display → Theme; "system" resolves to one of the two).
 */
:root {
  /* brand palette (primitives: use the semantic tokens below in components) */
  --kc-deep-ocean: #0b2a4a;
  --kc-sea-blue: #0077b6;
  --kc-aqua: #00c2c7;
  --kc-light-teal: #7ee3e0;
  --kc-sun-orange: #ff8a3d;
  --kc-sand: #f4f7f8;
  --kc-slate: #94a3b6;
  --kc-charcoal: #1f2937;
  --kc-white: #ffffff;
  --kc-sunrise: #ffc857;
  /* rain intensity (rain bar, rain chart, radar map; batch 11): light, moderate, heavy, very heavy */
  --rain-1: #59a6ff;
  --rain-2: #3377ff;
  --rain-3: #7a4dff;
  --rain-4: #ff4dd2;
  --gradient-ocean: linear-gradient(90deg, var(--kc-deep-ocean), var(--kc-aqua));
  --gradient-sunset: linear-gradient(90deg, var(--kc-sunrise), var(--kc-sun-orange));

  /* type (brand: Nunito for headings, Nunito Sans for text and numbers) */
  --font-heading: 'Nunito', 'Nunito Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-text: 'Nunito Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --text-display: 800 48px/52px var(--font-heading);
  --text-h1: 800 32px/38px var(--font-heading);
  --text-h2: 700 24px/30px var(--font-heading);
  --text-h3: 700 18px/24px var(--font-heading);
  --text-body: 400 16px/24px var(--font-text);
  --text-small: 400 14px/20px var(--font-text);
  --text-label: 700 12px/16px var(--font-text);
  --text-data: 800 28px/32px var(--font-text);
  --label-tracking: 2px;

  /* space, shape */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 48px;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-pill: 999px;
  --radius-icon: 22.5%;
}

/* semantic: dark (default). Also on any element with data-theme, so /design can show both themes side by side. */
:root,
[data-theme='dark'] {
  color-scheme: dark;
  --surface: var(--kc-deep-ocean);
  --surface-sunken: #071f38;
  --surface-card: #10355c;
  --surface-raised: #164270;
  --ink: var(--kc-sand);
  --ink-heading: var(--kc-white);
  /* Slate lifted one step for text: Slate itself drops under 4.5:1 on raised and aqua-tinted dark surfaces
     (axe, 19 Oct 2026). Slate stays the colour for borders and dividers. */
  --ink-muted: #adbacb;
  --action: var(--kc-aqua);
  --on-action: var(--kc-deep-ocean);
  /* aqua text on this tint stays ≥ 4.5:1 */
  --action-soft: color-mix(in srgb, var(--kc-aqua) 10%, transparent);
  /* the brand's warm accent (Sun Orange): once per view, e.g. the favourite star or the best window */
  --sun: var(--kc-sun-orange);
  --on-sun: var(--kc-deep-ocean);
  --line: color-mix(in srgb, var(--kc-light-teal) 18%, transparent);
  --line-strong: color-mix(in srgb, var(--kc-aqua) 60%, transparent);
  --line-faint: color-mix(in srgb, var(--kc-white) 8%, transparent);
  --glow: color-mix(in srgb, var(--kc-aqua) 7%, transparent);
  --shadow-card: 0 8px 24px color-mix(in srgb, #000 28%, transparent);
  --success: #43e08a;
  --danger: #ff8585;
  /* kite status colours (batch 9): dots, borders and tints; the status is always written next to them */
  --warn: var(--kc-sunrise);
  --status-good: var(--success);
  --status-light: var(--warn);
  --status-powered: var(--kc-sun-orange);
  --status-over: var(--danger);
  --status-none: var(--ink-muted);
  /* day ratings (batch 10): their own scale, separate from the wind-speed colours; text colour per step */
  --rating-epic: #8cff73;
  --on-rating-epic: #04140c;
  --rating-good: #3fd98c;
  --on-rating-good: #04140c;
  --rating-kiteable: #17735a;
  --on-rating-kiteable: #ffffff;
  --rating-marginal: #24456b;
  --on-rating-marginal: #ffffff;
  --rating-none: color-mix(in srgb, var(--kc-white) 5%, transparent);
  --on-rating-none: var(--ink-muted);
  --logo-horizontal: url(/brand/kitecast-horizontal-reversed.svg);
}

:root[data-theme='light'],
[data-theme='light'] {
  color-scheme: light;
  --surface: var(--kc-sand);
  --surface-sunken: #e8eef1;
  --surface-card: var(--kc-white);
  --surface-raised: var(--kc-white);
  --ink: var(--kc-charcoal);
  --ink-heading: var(--kc-deep-ocean);
  --ink-muted: #51627a;
  --action: var(--kc-sea-blue);
  --on-action: var(--kc-white);
  --action-soft: color-mix(in srgb, var(--kc-sea-blue) 10%, transparent);
  --line: color-mix(in srgb, var(--kc-deep-ocean) 14%, transparent);
  --line-strong: color-mix(in srgb, var(--kc-sea-blue) 55%, transparent);
  --line-faint: color-mix(in srgb, var(--kc-deep-ocean) 7%, transparent);
  --glow: transparent;
  --shadow-card: 0 4px 16px color-mix(in srgb, var(--kc-deep-ocean) 10%, transparent);
  --success: #146b3f;
  --danger: #c0392b;
  --warn: #8a5a00;
  --status-good: var(--success);
  --status-light: var(--warn);
  --status-powered: #a8480a;
  --status-over: var(--danger);
  --status-none: var(--ink-muted);
  --rating-epic: #7be05f;
  --on-rating-epic: #0b2a4a;
  --rating-good: #13844f;
  --on-rating-good: #ffffff;
  --rating-kiteable: #a7e0c4;
  --on-rating-kiteable: #0b2a4a;
  --rating-marginal: #c9d9ec;
  --on-rating-marginal: #0b2a4a;
  --rating-none: #eef2f5;
  --on-rating-none: #51627a;
  --logo-horizontal: url(/brand/kitecast-horizontal.svg);
}

/* Older names used across styles.css until every component is rebuilt from the library (steps 2–6). */
:root,
[data-theme] {
  --bg: var(--surface-sunken);
  --bg-2: var(--surface);
  --panel: var(--surface-card);
  --panel-solid: var(--surface-card);
  --stroke: var(--line);
  --stroke-strong: var(--line-strong);
  --corner: var(--action);
  --accent: var(--action);
  --accent-soft: var(--action-soft);
  --text: var(--ink);
  --text-2: color-mix(in srgb, var(--ink) 80%, var(--ink-muted));
  --muted: var(--ink-muted);
  --grid: var(--line-faint);
  --gust-fill: color-mix(in srgb, var(--kc-aqua) 16%, transparent);
  --gust-line: color-mix(in srgb, var(--kc-aqua) 40%, transparent);
  --mono: var(--font-text);
  --sans: var(--font-text);
  --radius: var(--radius-md);

  /* wind bands (data visualisation scale; tuned per theme in step 2) */
  --band-too-light: var(--kc-slate);
  --band-big-kite: var(--kc-aqua);
  --band-ideal: #43e08a;
  --band-small-kite: #f5a524;
  --band-too-strong: #ff5d5d;
}

h1,
h2,
h3 {
  font-family: var(--font-heading);
}

body {
  font-variant-numeric: tabular-nums;
}