/*
 * tokens.css — THE theme file. The single surface for theming a site.
 *
 * Every component reads these custom properties, so re-theming a whole site
 * (or tweaking one per client) means editing values here and nothing else.
 * Grouped by: colour, typography, spacing, radius, shadow, layout, motion.
 */

:root {
    /* ===== Colour =====
       Teacup palette: deep royal-blue base, white bands, orange accent. */
    /* Brand — blue primary (#4a9eff for links/icons), deeper #2f8bff for AA button text;
       orange accent (#ff7a1a) for CTAs, eyebrow chips and highlights. */
    --color-primary: #4a9eff;           /* primary blue */
    --color-primary-dark: #2f8bff;      /* hover */
    --color-primary-rgb: 74, 158, 255;  /* for rgba() tints + focus rings */
    --color-accent: #ff7a1a;            /* orange accent */

    /* Text (on dark) */
    --color-heading: #f6f8fe;           /* near-white */
    --color-text: #aeb6c8;              /* body copy */
    --color-text-muted: #8b94aa;        /* secondary / captions */

    /* Surfaces — deep BLUE base (Teacup blue/white/orange — bluer + less harsh than near-black). */
    --color-bg: #102a5e;                /* page background — deep royal-blue */
    --color-bg-alt: #143264;            /* slightly raised band */
    --color-surface: #1a3d7a;          /* cards */
    --color-border: rgba(255,255,255,.14);
    --color-inverse: #ffffff;          /* text on brand backgrounds */
    --color-footer-bg: #0c2150;        /* deepest blue (footer) */
    --color-dark: #1a3d7a;             /* blue card surface */

    /* Creative palette + gradient + glass (the dark theme's signature) */
    --c-blue: #4a9eff; --c-violet: #2f7bff; --c-cyan: #ff7a1a; --c-green: #ffb24d; --c-magenta: #ff9a4d;
    --grad: linear-gradient(110deg, #4a9eff, #ff7a1a 46%, #ff9a4d);
    --glass: rgba(255,255,255,.045); --glass-bd: rgba(255,255,255,.10);

    /* Feedback — alerts sit on light backgrounds, so their text is dark (not the page's light body colour) */
    --color-alert-text: #15223f;        /* dark navy — readable on the light alert backgrounds */
    --color-success-bg: #eaf2fe;        /* neutral light-blue wash (no green) */
    --color-success-border: #4a9eff;    /* brand-blue accent (no green) */
    --color-error-bg: #fef3f2;
    --color-error-border: #f04438;

    /* Focus ring (a11y) */
    --ring: 0 0 0 3px rgba(var(--color-primary-rgb), 0.35);

    /* ===== Typography =====
       Sora for headings + body (geometric sans); Saira SemiExpanded for the top menu.
       Loaded in base.twig; swap the font link + these two tokens to re-skin type. */
    --font-body: "Sora", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-heading: "Sora", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    --font-size-base: 1.0625rem;        /* 17px */
    --line-height-base: 1.7;
    --leading-tight: 1.1;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 700;
    --tracking-tight: -0.015em;         /* headings */

    /* Modular type scale */
    --text-sm: 0.9rem;
    --text-lg: 1.2rem;
    --text-xl: clamp(1.35rem, 2.5vw, 1.6rem);
    --text-2xl: clamp(1.75rem, 3.5vw, 2.25rem);
    --text-3xl: clamp(2.25rem, 5vw, 3.25rem);

    /* ===== Spacing ===== */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 1rem;
    --space-4: 1.5rem;
    --space-5: 2.5rem;
    --space-6: 4rem;
    --space-7: 6rem;
    --section-pad: clamp(3.5rem, 8vw, 6rem);   /* vertical rhythm for sections */

    /* ===== Radius ===== */
    --radius-sm: 8px;
    --radius: 14px;
    --radius-lg: 20px;
    --radius-pill: 999px;

    /* ===== Shadow (layered, soft) ===== */
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
    --shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
    --shadow-lg: 0 18px 40px rgba(15, 23, 42, 0.14);

    /* ===== Layout ===== */
    --container-max: 1140px;
    --container-pad: 1.5rem;
    --content-measure: 68ch;            /* readable text width */

    /* Content alignment — change these TWO values to re-align the WHOLE site.
       Centred:      --align-headings: center; --content-justify: auto;
       Left-aligned: --align-headings: left;   --content-justify: 0;            */
    --align-headings: left;
    --content-justify: 0;               /* auto = centred column, 0 = left-aligned */

    /* ===== Motion ===== */
    --transition: 180ms cubic-bezier(0.4, 0, 0.2, 1);
}