/*
 * Radio Christmas design tokens: Brand foundations v2.
 *
 * Every value is copied from the approved boards. Do not invent new values here.
 *   Foundations-v2.dc.html  BRIEF §28 (colour, type, layout, motion, a11y), §28a (no red on red)
 *   BRIEF §1                brand guidelines (scale, spacing, radii, card shadow)
 *   BRIEF §5.6              Kreeti page head (page title 44 / 1.2, 30 on phones)
 *   BRIEF §4c               kickers, statements, brand bands
 *   Obit-States.dc.html     BRIEF §25b–§25d: OBIT palette (black only)
 *   Widgets3-Together       BRIEF §20k: Inverted widget colour
 *
 * Layers:
 *   :root                       brand, neutral, type, space and shape tokens
 *   body (+ .skdr-c--light)     the component palette (--skdr-c-*), computed from the
 *                               brand tokens on <body> so the OBIT overrides flow through
 *   body.skdr-obit              OBIT mode: reds and yellow become black and greys
 *   .skdr-c--inverted           the Inverted widget palette (Dark Red ground)
 *
 * Breakpoints (custom properties cannot be used in media queries):
 *   760px  phones (components switch to their mobile form)
 */

:root {
	/* Brand colours (§1, Foundations-v2 §1) */
	--skdr-red: #D32C3F;        /* Radio Christmas Red: titles, show names, primary pills */
	--skdr-red-h: #A33045;      /* Stand Out Red: hover on red */
	--skdr-dark: #8F182E;       /* Dark Red: live labels and dots, links, chips, deep bands, the nav's current item */
	--skdr-yel: #FFCE00;        /* Yellow: Donate, the NEW chip, the appeal band */
	--skdr-yel-h: #F2C300;      /* Yellow hover */
	--skdr-on-yel: #8F182E;     /* type on yellow: Dark Red (or Ink), never white */
	--skdr-orange: #EF9A21;     /* logo and appeal gradient only */
	--skdr-skd-orange: #FF8000; /* Street Kids Direct references only */
	--skdr-gradient: linear-gradient(45deg, #FFCE00, #D32C3F); /* appeal / hero only, white logo on it */

	/* Placeholders (§18b) */
	--skdr-tint: #F2E4E6;       /* placeholder pink */
	--skdr-cut: #E8D7DA;        /* presenter cut-out silhouette */
	--skdr-dash: #D9D9D9;       /* dashed cut-out frame */

	/* Neutrals (Foundations-v2 §1) */
	--skdr-ink: #1A1A1A;        /* headings, strong text */
	--skdr-gray: #55555D;       /* body text on white, 7.4:1 */
	--skdr-muted: #6B6B73;      /* meta and captions, 5.3:1 */
	--skdr-line: #E6E6E6;       /* hairlines and card rings */
	--skdr-fill: #F5F5F5;       /* grey cells, hover fills */
	--skdr-page: #F9F9F9;       /* page body, alternate bands */
	--skdr-white: #FFFFFF;
	--skdr-track: #BDBDBD;      /* preview progress line */
	--skdr-black: #000000;      /* official store badges, Apple Music badge */

	/* Kreeti chrome: the nav is --skdr-red, current and hover --skdr-dark */
	--skdr-chrome-top: #4A4A4F;

	/* OBIT surfaces (Obit-States) */
	--skdr-obit-panel: #1A1A1A;
	--skdr-obit-navon: #1A1A1A;
	--skdr-obit-navhover: #3D3D44;

	/* Type: Poppins only (§1, Foundations-v2 §2) */
	--skdr-font: 'Poppins', sans-serif;
	--skdr-fw-light: 300;       /* OBIT statement headlines */
	--skdr-fw-regular: 400;     /* body and meta */
	--skdr-fw-medium: 500;      /* nav items only */
	--skdr-fw-semibold: 600;    /* labels, links, kickers */
	--skdr-fw-bold: 700;        /* headings, titles, pills */
	--skdr-fw-extrabold: 800;   /* big numbers on brand bands */

	--skdr-fs-title: 44px;      /* page title, Red, 700 (ladder 40–64) */
	--skdr-lh-title: 1.2;
	--skdr-fs-title-phone: 30px;
	--skdr-fs-statement: 64px;  /* statement, Ink, 700 (ladder 56–72) */
	--skdr-lh-statement: 72px;
	--skdr-ls-statement: -0.02em;
	--skdr-fs-h2: 28px;         /* section heading, Ink, 700, plain: no dash or rule */
	--skdr-lh-h2: 36px;
	--skdr-fs-h2-phone: 24px;
	--skdr-lh-h2-phone: 32px;
	--skdr-fs-h3: 18px;
	--skdr-lh-h3: 26px;
	--skdr-fs-body-l: 18px;     /* body 16–18, Gray */
	--skdr-lh-body-l: 30px;
	--skdr-fs-body: 16px;
	--skdr-lh-body: 26px;
	--skdr-fs-small: 14px;      /* small, Muted */
	--skdr-lh-small: 22px;
	--skdr-fs-caption: 13px;    /* caption 12–13, Muted */
	--skdr-lh-caption: 20px;
	--skdr-fs-label: 12px;      /* label line and kicker */
	--skdr-lh-label: 18px;
	--skdr-ls-label: 0.08em;    /* label line: "ON NOW · 10am – 1pm" */
	--skdr-ls-kicker: 0.12em;   /* kicker above a section heading */

	/* Space: 4px base (§1, Foundations-v2 §3) */
	--skdr-sp-4: 4px;
	--skdr-sp-8: 8px;
	--skdr-sp-12: 12px;
	--skdr-sp-16: 16px;
	--skdr-sp-24: 24px;
	--skdr-sp-32: 32px;
	--skdr-sp-40: 40px;
	--skdr-sp-64: 64px;
	--skdr-section-home: 36px;  /* homepage modules: 72 apart (36 + 36) */
	--skdr-section-inner: 48px; /* inner pages: Donate, show, presenter */

	/* Layout */
	--skdr-container: 1200px;
	--skdr-content: 1300px;         /* Kreeti's page content container; the desktop nav spans it */
	--skdr-content-gutter: 15px;
	--skdr-gutter: 24px;
	--skdr-gutter-phone: 16px;

	/* Shape */
	--skdr-r-chip: 4px;         /* chips, badges, inputs */
	--skdr-r-card: 8px;         /* cards, artwork */
	--skdr-r-panel: 12px;       /* panels */
	--skdr-r-pill: 999px;       /* pills */
	--skdr-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.06), 0 0 0 1px #E6E6E6;
	--skdr-shadow-ring: 0 0 0 1px #E6E6E6;
	--skdr-shadow-pop: 0 1px 3px rgba(0, 0, 0, 0.12), 0 0 0 1px #E6E6E6;

	/* Accessibility and motion (Foundations-v2 §6) */
	--skdr-tap: 44px;           /* minimum tap target */
	--skdr-autoadvance: 7s;     /* carousels, with a pause button */
	--skdr-hover-fade: 0.15s;
}

/*
 * Component palette, light (the default). Declared on <body> rather than :root so
 * var(--skdr-red) and friends resolve after body.skdr-obit has swapped them.
 * .skdr-c--light forces it back inside an inverted container, and OBIT ignores
 * Inverted: OBIT is black only (Widgets3-Together, §25b).
 */
body,
.skdr-c--light,
body.skdr-obit .skdr-c--inverted {
	--skdr-c-surface: var(--skdr-white);
	--skdr-c-shadow: var(--skdr-shadow-card);
	--skdr-c-heading: var(--skdr-ink);
	--skdr-c-title: var(--skdr-red);    /* widget card titles: Red on white is 5.0:1 */
	--skdr-c-text: var(--skdr-gray);
	--skdr-c-muted: var(--skdr-muted);
	--skdr-c-line: var(--skdr-line);
	--skdr-c-fill: var(--skdr-fill);
	--skdr-c-kicker: var(--skdr-red);
	--skdr-c-label: var(--skdr-muted);
	--skdr-c-label-now: var(--skdr-dark);
	--skdr-c-label-next: var(--skdr-ink);
	--skdr-c-dot: var(--skdr-dark);
	--skdr-c-link: var(--skdr-dark);
	--skdr-c-link-h: var(--skdr-red);
	--skdr-c-pill-bg: var(--skdr-red);
	--skdr-c-pill-bg-h: var(--skdr-red-h);
	--skdr-c-pill-fg: var(--skdr-white);
	--skdr-c-outline: var(--skdr-dark);
	--skdr-c-chip-bg: var(--skdr-dark);
	--skdr-c-chip-fg: var(--skdr-white);
	--skdr-ph-bg: var(--skdr-tint);
	--skdr-ph-fg: var(--skdr-dark);

	/* Focus ring: 2px white outline + 4px red halo */
	--skdr-focus-outline: 2px solid #FFFFFF;
	--skdr-focus-offset: 0;
	--skdr-focus-shadow: 0 0 0 4px var(--skdr-red);
}

/*
 * OBIT mode (Obit-States, §25b): black only. Red, Dark Red and Yellow become
 * #1A1A1A, secondaries stay grey, placeholders go neutral. Type on the old
 * yellow turns white so no text ever sits on its own colour (§25b.1).
 */
body.skdr-obit {
	--skdr-red: #1A1A1A;
	--skdr-red-h: #3D3D44;
	--skdr-dark: #1A1A1A;
	--skdr-yel: #1A1A1A;
	--skdr-yel-h: #3D3D44;
	--skdr-on-yel: #FFFFFF;
	--skdr-tint: #EDEDEF;
	--skdr-cut: #D9D9DE;
	--skdr-obit-panel: #1A1A1A;
	--skdr-obit-navon: #1A1A1A;
	--skdr-obit-navhover: #3D3D44;
	--skdr-ph-fg: #55555D;
}

body.skdr-obit .skdr-c--inverted {
	--skdr-ph-fg: #55555D;
}

/*
 * Inverted (Widgets3-Together, §20k): Dark Red ground, white text, .8 secondaries,
 * .2 dividers, yellow kicker and label lines, white text links, a yellow primary pill
 * with Dark Red text and a white outline pill. Placeholders stay pink and the Apple
 * Music badge stays black. NO red on red: nothing here is #D32C3F.
 * The palette only; the widget shell paints the ground with --skdr-c-surface.
 */
.skdr-c--inverted {
	--skdr-c-surface: #8F182E;
	--skdr-c-shadow: none;
	--skdr-c-heading: #FFFFFF;
	--skdr-c-title: #FFFFFF;
	--skdr-c-text: rgba(255, 255, 255, 0.8);
	--skdr-c-muted: rgba(255, 255, 255, 0.8);
	--skdr-c-line: rgba(255, 255, 255, 0.2);
	--skdr-c-fill: rgba(255, 255, 255, 0.12);
	--skdr-c-kicker: #FFCE00;
	--skdr-c-label: #FFCE00;
	--skdr-c-label-now: #FFCE00;
	--skdr-c-label-next: #FFCE00;
	--skdr-c-dot: #FFCE00;
	--skdr-c-link: #FFFFFF;
	--skdr-c-link-h: #FFFFFF;
	--skdr-c-pill-bg: #FFCE00;
	--skdr-c-pill-bg-h: #F2C300;
	--skdr-c-pill-fg: #8F182E;
	--skdr-c-outline: #FFFFFF;
	--skdr-c-chip-bg: #FFFFFF;
	--skdr-c-chip-fg: #8F182E;
	--skdr-focus-outline: 2px solid #FFFFFF;
	--skdr-focus-offset: 2px;
	--skdr-focus-shadow: none;
}