/* =========================================================
   2IMAGINE BRAND FOUNDATION

   Central source of truth for brand primitives and reusable
   design tokens. Component and page composition remain in
   website.css during the DEV-2282 migration.
========================================================= */

:root {
    /* -----------------------------------------------------
       Color primitives
    ----------------------------------------------------- */
    --black: #1f1f1f;
    --cream: #f6f3ee;
    --blue: #315f86;
    --amber: #a8752a;
    --green: #4f7a5a;
    --red: #9b4a3c;
    --purple: #6b5a91;
    --white: #ffffff;

    /* -----------------------------------------------------
       Semantic colors
    ----------------------------------------------------- */
    --surface-dark: #0b0f1a;
    --surface-page: #f6f7fb;
    --surface-card: #f8fafc;
    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-on-dark: rgba(255, 255, 255, 0.78);
    --ui-blue: #2f5cff;
    --surface-border: color-mix(in srgb, var(--text-secondary) 22%, var(--white));

    /* -----------------------------------------------------
       RGB helpers for alpha-based UI
    ----------------------------------------------------- */
    --white-rgb: 255, 255, 255;
    --surface-dark-rgb: 11, 15, 26;
    --surface-page-rgb: 246, 247, 251;
    --surface-card-rgb: 248, 250, 252;
    --text-primary-rgb: 15, 23, 42;
    --ui-blue-rgb: 47, 92, 255;
    --green-rgb: 79, 122, 90;
    --red-rgb: 155, 74, 60;

    /* -----------------------------------------------------
       Semantic overlays
    ----------------------------------------------------- */
    --overlay-white: rgba(255, 255, 255, 0.08);
    --overlay-dark: rgba(15, 23, 42, 0.12);
    --overlay-blue: rgba(47, 92, 255, 0.18);
    --overlay-green: rgba(79, 122, 90, 0.18);
    --overlay-red: rgba(155, 74, 60, 0.18);

    /* -----------------------------------------------------
       Typography
    ----------------------------------------------------- */
    --font-family-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    --font-weight-regular: 400;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;

    --font-size-display: clamp(2.5rem, 5vw, 3.8rem);
    --font-size-section-title: clamp(2.15rem, 4.2vw, 3rem);
    --font-size-component-title: 1.375rem;
    --font-size-lead: 1.05rem;
    --font-size-body: 1rem;
    --font-size-small: 0.875rem;
    --font-size-eyebrow: 0.8125rem;
    --font-size-control: 0.95rem;

    --line-height-tight: 1.12;
    --line-height-heading: 1.15;
    --line-height-body: 1.65;
    --line-height-article: 1.8;

    /* -----------------------------------------------------
       Spacing scale
    ----------------------------------------------------- */
    --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-12: 48px;
    --space-16: 64px;
    --space-20: 80px;
    --space-24: 96px;

    --section-space-compact: var(--space-12);
    --section-space-default: var(--space-20);
    --section-space-roomy: var(--space-24);
    --hero-space-block: 100px;

    /* -----------------------------------------------------
       Containers and reading widths
    ----------------------------------------------------- */
    --container-standard: 1200px;
    --container-wide: 1600px;
    --container-narrow: 900px;
    --content-article: 780px;
    --content-lead: 720px;
    --page-gutter: 20px;

    /* -----------------------------------------------------
       Borders and radii
    ----------------------------------------------------- */
    --border-width-default: 1px;
    --radius-control: 10px;
    --radius-soft: 14px;
    --radius-surface: 18px;
    --radius-pill: 999px;
    --radius-circle: 50%;

    /* -----------------------------------------------------
       Shadows and focus
    ----------------------------------------------------- */
    --shadow-surface: 0 18px 48px rgba(var(--text-primary-rgb), 0.07);
    --shadow-raised: 0 22px 56px rgba(var(--text-primary-rgb), 0.11);
    --focus-ring: 0 0 0 3px rgba(var(--ui-blue-rgb), 0.24);

    /* -----------------------------------------------------
       Motion and layers
    ----------------------------------------------------- */
    --duration-fast: 0.2s;
    --duration-smooth: 0.22s;
    --ease-standard: ease;
    --transition-smooth: var(--duration-smooth) var(--ease-standard);

    --z-content: 1;
    --z-decoration: 2;
    --z-header: 1000;
    --z-overlay: 1200;

    /* -----------------------------------------------------
       Shared backgrounds
    ----------------------------------------------------- */
    --background-hero: linear-gradient(
        to bottom left,
        var(--surface-dark) 0%,
        color-mix(in srgb, var(--surface-dark) 86%, var(--ui-blue)) 100%
    );

    /* -----------------------------------------------------
       Button foundation tokens
    ----------------------------------------------------- */
    --button-min-height: 44px;
    --button-padding-block: 13px;
    --button-padding-inline: 20px;
    --button-radius: var(--radius-control);

    /* -----------------------------------------------------
       Temporary compatibility aliases
    ----------------------------------------------------- */
    --text: var(--text-primary);
    --text-muted: var(--text-secondary);
    --surface: var(--surface-page);
    --muted: var(--surface-page);
    --dark: var(--surface-dark);
    --light: var(--white);
    --accent-primary: var(--ui-blue);
    --accent-primary-gradient: linear-gradient(
        135deg,
        var(--ui-blue),
        color-mix(in srgb, var(--ui-blue) 70%, var(--white))
    );
    --accent-success: var(--green);
    --accent-success-border: var(--overlay-green);
}