/* ==========================================================================
   Design tokens — the approved icoSTL brand system
   ========================================================================== */

:root {
    /* Colour ------------------------------------------------------------ */
    --color-black: #000000;
    --color-white: #ffffff;
    --color-orange: #ff5a36;
    --color-border: #e0e0e0;

    /* Supporting neutrals, derived from the black/white system */
    --color-ink: #111111;
    --color-muted: #5a5a5a;
    --color-muted-light: #8a8a8a;
    --color-field-border: #8f8f8f;

    /* --color-muted is tuned for light surfaces (6.90:1 on white) and drops to
       3.04:1 on black. This is its counterpart for dark sections. */
    --color-muted-on-dark: #c8c8c8;
    --color-surface: #f6f6f6;
    --color-surface-dark: #0a0a0a;
    --color-border-dark: #2a2a2a;

    /* Orange used for state only, never decoration */
    --color-orange-hover: #e84a28;

    /* Signal Orange as a FILL is 3.10:1 against white — fine for rules, borders
       and icons (WCAG needs 3:1 for non-text UI) but below the 4.5:1 required
       for body text. This darker step is used only for orange TEXT sitting on
       a light background; on black, --color-orange is used directly (6.77:1). */
    --color-orange-text: #cc3616;

    /* Spacing scale ------------------------------------------------------ */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 40px;
    --space-2xl: 80px;

    /* Layout ------------------------------------------------------------- */
    --container-max: 1280px;
    --container-gutter: 24px;
    --container-margin: 80px;
    --grid-gutter: 24px;

    /* Typography --------------------------------------------------------- */
    --font-sans: "Assistant", -apple-system, BlinkMacSystemFont, "Segoe UI",
        Roboto, "Helvetica Neue", Arial, sans-serif;

    --weight-body: 400;
    --weight-medium: 600;
    --weight-bold: 800;

    --text-display: clamp(2.5rem, 6vw, 4.25rem);
    --text-h1: clamp(2.125rem, 5vw, 3.5rem);
    --text-h2: clamp(1.75rem, 3.4vw, 2.625rem);
    --text-h3: clamp(1.25rem, 1.8vw, 1.5rem);
    --text-body-lg: clamp(1.0625rem, 1.3vw, 1.1875rem);
    --text-body: 1.0625rem;
    --text-sm: 0.9375rem;
    --text-caption: 0.8125rem;
    --text-eyebrow: 0.75rem;

    --leading-tight: 1.05;
    --leading-snug: 1.2;
    --leading-normal: 1.65;

    --tracking-eyebrow: 0.18em;
    --tracking-tight: -0.02em;

    /* Borders and radius -------------------------------------------------- */
    --radius-sm: 2px;
    --radius-md: 4px;
    --border-thin: 1px solid var(--color-border);

    /* Motion -------------------------------------------------------------- */
    --transition-fast: 120ms ease;
    --transition-base: 200ms ease;

    /* Accent rule --------------------------------------------------------- */
    --accent-rule-width: 48px;
    --accent-rule-height: 4px;
}