/* ═══════════════════════════════════════════════════════════════════════════
   GENERATED FILE — DO NOT EDIT.
   Source: brand/tokens.json   Regenerate: python3 brand/build_tokens.py
   Any edit here is lost on the next build. Change the token instead.
   ═══════════════════════════════════════════════════════════════════════════ */


:root {
    /* ── Colour ─────────────────────────────────────────────── */
    /* Primary brand mark. Logo, large display text, decorative fills, footer. (3.91:1) */
    /*    FAILS WCAG AA (4.5:1) for normal-size text. NEVER use for body text on white, and */
    /*    never as a background behind small white text. Use brand-blue-ink or brand-blue-deep */
    /*    instead. This single rule is the origin of every contrast defect found in the July */
    /*    2026 audit. */
    --brand-blue: #3D85C6;

    /* Any blue TEXT, link or icon on a light background. (6.23:1) */
    --brand-blue-ink: #2C6496;

    /* Filled/inverted sections that carry white text. (5.78:1) */
    --brand-blue-deep: #2E699E;

    /* Accent. The TAEKWONDO wordmark at display size, and large decorative fills. (3.99:1) */
    /*    FAILS AA for normal-size text (needs 4.5:1). Large display type only — the nav */
    /*    wordmark at 10px was a real failure. Use brand-red-ink for any red text below 24px. */
    --brand-red: #fc0f36;

    /* Red TEXT at normal size, and red buttons carrying white labels. (5.47:1) */
    /*    Same hue as brand-red, darkened to 42% lightness. Reads 5.47:1 in both directions, */
    /*    so it works as text on white AND as a fill behind white text. */
    --brand-red-ink: #D40325;

    /* Google-flavoured link/action text (Directions, Maps actions). (5.85:1) */
    /*    Replaces #4285f4 (3.56:1), which failed AA on the branch cards. */
    --link-blue-ink: #1A62C4;

    /* Highlight and hover states. (1.97:1) */
    /*    FAILS AA badly for text (1.97:1). Decorative fills, highlights and hover states */
    /*    only. Use brand-gold-ink for any gold TEXT, including star-rating glyphs. */
    --brand-gold: #F9A825;

    /* Gold TEXT — star-rating glyphs and gold labels. (5.05:1) */
    /*    Same hue as brand-gold, darkened to 31% lightness. Reads as a deep bronze-gold. */
    /*    Added because the branch-page star ratings were gold text at 1.97:1. */
    --brand-gold-ink: #9C6204;

    /* Headings, and dark text over light photo overlays. (13.6:1) */
    --ink-strong: #1f2d3d;

    /* Default body text. (12.6:1) */
    --ink: #333333;

    /* Secondary copy, captions. (5.9:1) */
    --ink-muted: #55677a;

    /* The LIGHTEST text permitted on white. Nothing lighter ships. (4.89:1) */
    --ink-subtle: #68727d;

    /* Default page background. */
    --surface: #FFFFFF;

    /* Alternating section background. */
    --surface-alt: #f7f9fc;

    /* Inset panels. */
    --surface-sunken: #F5F7FA;

    /* Card and input borders. */
    --border: #e2e9f2;

    /* Structural dividers, nav underline. */
    --border-strong: #e6ecf3;

    /* Background of a panel holding interactive controls — filter lists, toggle groups, tab strips. */
    /*    Deliberately tinted, not another near-white. surface/surface-alt/surface-sunken sit */
    /*    within 1.04:1 of each other, so a white control on any of them had no visible edge */
    /*    and the panel did not read as a set of things you can press. Pair with */
    /*    control-border on the controls themselves. */
    --surface-control: #DDE7F0;

    /* Resting border of an interactive control — checkbox, filter chip, toggle. (3.51:1) */
    /*    WCAG 1.4.11 requires 3:1 for the boundary of a UI component, which the decorative */
    /*    border/border-strong (1.3:1 and 1.2:1) do not meet. Use this for anything the */
    /*    visitor is meant to click, and keep border for static card edges. */
    --control-border: #6E8CA8;

    /* Text on brand-blue-deep. */
    --on-dark: #ffffff;

    /* Secondary text on brand-blue-deep. */
    /*    0.85 is the FLOOR. At 0.6 this measured 2.40:1 and failed AA. */
    --on-dark-muted: rgba(255, 255, 255, 0.85);

    /* WhatsApp actions only. */
    --whatsapp-green: #1c7c47;

    /* LEGACY programme stripe accent. Superseded by the program-* fills — do not use for a programme. */
    /*    2.78:1 on white, below the 3:1 UI-component threshold. Kept only until the last */
    /*    non-schedule consumer is migrated. */
    --accent-green: #4CAF50;

    /* LEGACY programme stripe accent. Superseded by the program-* fills — do not use for a programme. */
    --accent-blue: #2196F3;

    /* LEGACY programme stripe accent. Superseded by the program-* fills — do not use for a programme. */
    --accent-dark: #000000;

    /* Programme identity fill — Little Gaonhae. */
    /*    Kept at the exact print value despite reading harsh on screen. Softening it collides */
    /*    with program-advanced #FFE599 on Bukit Merah, whose printed sheet legitimately */
    /*    carries three yellows. Fidelity to the legend beats screen comfort here; revisit */
    /*    only if the client changes the printed sheet. */
    --program-little: #FFFF00;

    /* Programme identity fill — Junior. */
    /*    INFERRED, not confirmed. Present in a sheet listing Junior, but the swatch-to-label */
    /*    match could not be made positionally. Verify against the printed sheet. */
    --program-junior: #D9EAD3;

    /* Programme identity fill — Kids. */
    --program-kids: #B6D7A8;

    /* Programme identity fill — Teens/Adults. */
    --program-teens: #D9D2E9;

    /* Programme identity fill — Black Tip & Above. */
    /*    Previously shared a colour class with Combat/Self-Defense, so two different */
    /*    programmes rendered identically. */
    --program-blacktip: #EA9999;

    /* Programme identity fill — Team Gaonhae Kyorugi. */
    --program-kyorugi: #F9CB9C;

    /* Programme identity fill — Team Gaonhae Poomsae. */
    --program-poomsae: #A4C2F4;

    /* Programme identity fill — Private Lessons. */
    --program-private: #CFE2F3;

    /* Programme identity fill — Competition Class. */
    /*    INFERRED but strong: this colour appears in exactly the four branch sheets that list */
    /*    Competition Class. Previously the programme rendered in two different colours */
    /*    depending on branch. */
    --program-competition: #EAD1DC;

    /* Programme identity fill — Advanced Kyorugi. */
    /*    INFERRED, not confirmed. From Bukit Merah, the only sheet listing Advanced Kyorugi. */
    /*    Verify against the printed sheet. */
    --program-advanced: #FFE599;

    /* Programme identity fill — Team Gaonhae Klass. */
    /*    INFERRED, not confirmed. From Bukit Merah, the only sheet listing Team Gaonhae */
    /*    Klass. Verify against the printed sheet. */
    --program-klass: #F1C232;

    /* Programme identity fill — Combat/Self-Defense. */
    /*    INFERRED, not confirmed. From Yishun, the only sheet listing Combat/Self-Defense. */
    /*    Verify against the printed sheet. */
    --program-combat: #E69138;

    /* Programme identity stroke — Little Gaonhae. (3.0:1) */
    --program-little-ink: #9A9A00;

    /* Programme identity stroke — Junior. (3.01:1) */
    --program-junior-ink: #65A44E;

    /* Programme identity stroke — Kids. (3.01:1) */
    --program-kids-ink: #66A44C;

    /* Programme identity stroke — Teens/Adults. (3.02:1) */
    --program-teens-ink: #9D8BC7;

    /* Programme identity stroke — Black Tip & Above. (3.01:1) */
    --program-blacktip-ink: #E27474;

    /* Programme identity stroke — Team Gaonhae Kyorugi. (3.01:1) */
    --program-kyorugi-ink: #E2790E;

    /* Programme identity stroke — Team Gaonhae Poomsae. (3.02:1) */
    --program-poomsae-ink: #6094EC;

    /* Programme identity stroke — Private Lessons. (3.0:1) */
    --program-private-ink: #589AD5;

    /* Programme identity stroke — Competition Class. (3.02:1) */
    --program-competition-ink: #C5809F;

    /* Programme identity stroke — Advanced Kyorugi. (3.0:1) */
    --program-advanced-ink: #BE8D00;

    /* Programme identity stroke — Team Gaonhae Klass. (3.0:1) */
    --program-klass-ink: #B98F0D;

    /* Programme identity stroke — Combat/Self-Defense. (3.02:1) */
    --program-combat-ink: #DB7D1C;

    /* Icon stroke. */
    --icon-navy: #002D62;

    /* Icon stroke. */
    --icon-red: #C8102E;

    /* Near-black. Branch page headings. */
    --dark: #0a0a1a;

    /* ── Typography ─────────────────────────────────────────── */
    --font-main: 'Outfit', sans-serif;
    --font-kr: 'Noto Sans KR', sans-serif;
    --font-mono: 'SFMono-Regular', ui-monospace, Menlo, monospace;

    --text-xs: 0.85rem;
    --text-sm: 0.92rem;
    --text-base: 1.02rem;
    --text-lg: 1.08rem;
    --text-xl: 1.25rem;
    --text-h2: 1.8rem;
    --text-h1: clamp(2rem, 5vw, 3rem);

    --weight-normal: 400;
    --weight-medium: 600;
    --weight-bold: 700;
    --weight-heavy: 800;
    --weight-black: 900;

    --leading-tight: 1.15;
    --leading-normal: 1.6;
    --leading-loose: 1.75;

    /* ── Space ──────────────────────────────────────────────── */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-14: 56px;
    --space-16: 64px;
    --space-18: 72px;

    /* ── Radius ─────────────────────────────────────────────── */
    --radius-sm: 10px;
    --radius: 14px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-pill: 30px;

    /* ── Elevation & motion ─────────────────────────────────── */
    --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-card: 0 8px 24px rgba(0, 0, 0, 0.09);
    --shadow-lifted: 0 10px 40px rgba(0, 0, 0, 0.1);
    --transition: all 0.3s ease;
    --transition-fast: 0.15s ease;

    /* ── Layout ─────────────────────────────────────────────── */
    --container-max: 1200px;
    --container-pad: 20px;
    --measure: 70ch;
    --nav-height: 80px;

    /* ── Legacy aliases (see tokens.json) ───────────────────── */
    --primary-color: var(--brand-blue);
    --secondary-color: var(--brand-red);
    --accent-color: var(--brand-gold);
    --text-color: var(--ink);
    --light-bg: var(--surface-sunken);
    --white: var(--surface);

}