/* Design tokens — the single source of truth. See docs/DESIGN.md.
   Palette aligned to the Dynatuners brand (dynatuners.com): primary blue
   #23619d, dark navy #174067, brighter blue #2971b8, gold accent. Token NAMES
   are unchanged so the rest of the CSS is untouched. Text/button pairings keep
   WCAG AA contrast (two shade tweaks noted in DESIGN.md). */
:root {
    /* ---- Color ---- */
    --primary:        #23619D;  /* Dynatuners brand blue (white text ≈ 6.5:1, AA) */
    --primary-hover:  #1B4E7E;  /* darker for hover/active */
    --primary-tint:   #E8F0F8;  /* light blue surface */
    --accent:         #B8860B;  /* gold (darkened from brand #E3C35B for AA on white) */
    --accent-tint:    #FAF3DF;  /* brand gold, very light */

    --bg:        #F2F5F7;       /* brand light surface */
    --surface:   #FFFFFF;
    --surface-2: #E9EEF3;
    --border:    #D8E0E8;
    --border-strong: #C3CFDB;

    --ink:   #16233A;           /* navy-tinted near-black (≈13:1 on white) */
    --ink-2: #3A4A60;
    --muted: #5E6E80;           /* ≈5:1 on white, AA */
    --on-primary: #FFFFFF;

    --success: #1E7F5C; --success-tint: #E6F4EE;
    --warning: #B8860B; --warning-tint: #FAF3DF;
    --danger:  #B42318; --danger-tint:  #FCEBEA;
    --info:    #1F5B94; --info-tint:    #E8F0F8;  /* AA-safe brand blue for links/info */

    /* ---- Type (Dynatuners fonts: Roboto Slab headings, Roboto body) ---- */
    --font-display: "Roboto Slab", Georgia, "Times New Roman", serif;
    --font-body:    "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
    --font-mono:    "JetBrains Mono", ui-monospace, "Cascadia Code", Consolas, monospace;

    --fs-xs:  0.75rem;   /* 12 */
    --fs-sm:  0.8125rem; /* 13 */
    --fs-base: 0.9375rem;/* 15 */
    --fs-md:  1.0625rem; /* 17 */
    --fs-lg:  1.25rem;   /* 20 */
    --fs-xl:  1.5625rem; /* 25 */
    --fs-2xl: 2rem;      /* 32 */
    --fs-3xl: 2.75rem;   /* 44 */

    --lh-tight: 1.2;
    --lh-body:  1.55;

    /* ---- Space (4px base) ---- */
    --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem;
    --sp-5: 1.5rem;  --sp-6: 2rem;   --sp-7: 3rem;    --sp-8: 4rem;

    /* ---- Radius ---- */
    --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-full: 999px;

    /* ---- Shadow ---- */
    --shadow-sm: 0 1px 2px rgba(28, 32, 36, 0.06), 0 1px 1px rgba(28, 32, 36, 0.04);
    --shadow-md: 0 2px 4px rgba(28, 32, 36, 0.06), 0 6px 16px rgba(28, 32, 36, 0.08);
    --shadow-lg: 0 12px 32px rgba(28, 32, 36, 0.14);
    --ring: 0 0 0 3px rgba(35, 97, 157, 0.32);

    /* ---- Motion ---- */
    --motion-fast: 120ms;
    --motion: 200ms;
    --ease: cubic-bezier(0.4, 0, 0.2, 1);

    /* ---- Layout ---- */
    --bar-h: 60px;
    --sidebar-w: 230px;
    --content-max: 980px;
}
