/**
 * SAI PR - Global Central Design Tokens & Responsive Variables
 * Brand: SAI Communications & PR
 * Primary Heading Font: Barlow
 * Secondary Body Font: Roboto
 */

:root {
    /* =========================================================================
       01. GLOBAL FONT STACK
       ========================================================================= */
    --font-heading: "Barlow", Arial, sans-serif;
    --font-body: "Roboto", Arial, sans-serif;
    --font-primary: var(--font-body);
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

    /* =========================================================================
       02. OFFICIAL SAI PR BRAND COLOR PALETTE (#23316E 11-Step Tonal Scale)
       ========================================================================= */
    --primary-50: #F0F4FA;
    --primary-100: #E0E9F5;
    --primary-200: #C2D4EB;
    --primary-300: #94B4DC;
    --primary-400: #5B8AC7;
    --primary-500: #3667B0;
    --primary-600: #2B4F93;
    --primary-700: #23316E; /* Dominant official SAI PR brand blue */
    --primary-800: #1C2758;
    --primary-900: #151D43;
    --primary-950: #0C1128;

    --color-primary: #23316E;
    --color-primary-hover: #1C2758;
    --color-primary-deep: #080E23;
    --color-primary-soft: #EBF0FA;
    --color-primary-subtle: #F4F6F9;
    --color-primary-glow: rgba(35, 49, 110, 0.12);

    /* Legacy color aliases */
    --sai-blue: var(--color-primary);
    --sai-blue-primary: var(--primary-800);
    --sai-blue-deep: var(--primary-900);
    --sai-navy: #080E23;
    --sai-navy-surface: #0E1633;
    --sai-blue-soft: var(--color-primary-soft);
    --sai-blue-subtle: var(--color-primary-subtle);
    --sai-blue-glow: var(--color-primary-glow);

    /* Neutral & Ink Palette */
    --color-white: #FFFFFF;
    --color-black: #000000;
    --color-bg: #FFFFFF;
    --color-bg-alt: #FBFBFC;
    --color-surface: #F4F6F9;
    --color-surface-elevated: #FFFFFF;
    --color-surface-dark: #080E23;
    --color-surface-dark-card: #121A38;

    --color-text: #111318;
    --color-text-secondary: #2E333D;
    --color-text-muted: #5A6270;
    --color-text-light: #858E9E;
    --color-text-inverse: #FFFFFF;

    /* Legacy ink aliases */
    --ink: var(--color-text);
    --ink-secondary: var(--color-text-secondary);
    --ink-muted: var(--color-text-muted);
    --ink-light: var(--color-text-light);
    --white: var(--color-white);
    --off-white: var(--color-bg-alt);
    --surface-light: var(--color-surface);
    --surface-elevated: var(--color-surface-elevated);

    /* Architectural Hairline Borders */
    --color-border: #E2E5EB;
    --color-border-light: #EDF0F5;
    --color-border-strong: #CBD2DE;
    --color-border-blue: rgba(35, 49, 110, 0.25);
    --border: var(--color-border);
    --border-light: var(--color-border-light);
    --border-dark: #1E284A;
    --border-blue: var(--color-border-blue);

    /* Status System */
    --color-success: #1E7E4D;
    --color-success-bg: #EAF6F0;
    --color-warning: #B57710;
    --color-warning-bg: #FEF7EA;
    --color-danger: #BA2828;
    --color-danger-bg: #FDF1F1;
    --color-info: #0284C7;
    --color-info-bg: #E0F2FE;

    --success: var(--color-success);
    --warning: var(--color-warning);
    --error: var(--color-danger);

    /* =========================================================================
       03. FLUID TYPOGRAPHY SCALE (rem & clamp)
       ========================================================================= */
    --text-display-xl: clamp(2.25rem, 3.8vw, 3.75rem);
    --text-display-lg: clamp(2rem, 3.2vw, 3.15rem);

    --text-h1: clamp(1.85rem, 2.8vw, 2.75rem);
    --text-h2: clamp(1.5rem, 2.2vw, 2.15rem);
    --text-h3: clamp(1.25rem, 1.6vw, 1.55rem);
    --text-h4: clamp(1.1rem, 1.3vw, 1.3rem);
    --text-h5: 1.0625rem;
    --text-h6: 0.9375rem;

    --text-body-lg: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
    --text-body: 0.9375rem;
    --text-body-sm: 0.8125rem;
    --text-caption: 0.75rem;
    --text-eyebrow: 0.75rem;

    /* Backward compatibility typography aliases */
    --fs-hero: var(--text-display-xl);
    --fs-h1: var(--text-h1);
    --fs-h2: var(--text-h2);
    --fs-h3: var(--text-h3);
    --fs-h4: var(--text-h4);
    --fs-h5: var(--text-h5);
    --fs-h6: var(--text-h6);
    --fs-lead: var(--text-body-lg);
    --fs-body: var(--text-body);
    --fs-small: var(--text-body-sm);

    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-md: 1.125rem;
    --text-lg: 1.25rem;
    --text-xl: 1.5rem;
    --text-2xl: 2rem;
    --text-3xl: 2.5rem;

    /* Line Heights */
    --leading-display: 0.98;
    --leading-heading: 1.12;
    --leading-heading-relaxed: 1.22;
    --leading-body: 1.65;
    --leading-body-lg: 1.6;
    --leading-small: 1.5;

    /* Letter Spacing */
    --tracking-tight: -0.03em;
    --tracking-heading: -0.02em;
    --tracking-normal: 0;
    --tracking-wide: 0.04em;
    --tracking-eyebrow: 0.12em;

    /* Weights */
    --weight-h1: 700;
    --weight-h2: 600;
    --weight-h3: 600;
    --weight-h4: 600;
    --weight-h5: 600;
    --weight-h6: 600;
    --weight-body: 400;
    --weight-body-bold: 700;

    /* =========================================================================
       04. BUTTON SYSTEM TOKENS
       ========================================================================= */
    --btn-font: var(--font-heading);
    --btn-font-weight: 600;
    --btn-radius: 0.5rem;
    --btn-letter-spacing: 0.02em;
    --btn-height-sm: 2.5rem;
    --btn-height-md: 3rem;
    --btn-height: var(--btn-height-md);
    --btn-height-lg: 3.5rem;
    --btn-height-xl: 4rem;
    --btn-padding-inline: 1.5rem;

    /* =========================================================================
       05. FORM SYSTEM TOKENS
       ========================================================================= */
    --field-font: var(--font-body);
    --field-label-font: var(--font-heading);
    --field-label-weight: 600;
    --field-height: 3rem;
    --field-radius: 0.5rem;
    --field-bg: #FFFFFF;
    --field-border: #E2E5EB;
    --field-border-focus: var(--color-primary);
    --field-focus-ring: rgba(35, 49, 110, 0.15);
    --field-padding-inline: 1rem;
    --field-placeholder: #858E9E;

    /* =========================================================================
       06. GLOBAL FLUID SPACING SCALE
       ========================================================================= */
    --space-0: 0;
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-7: 2rem;
    --space-8: 2.5rem;
    --space-9: 3rem;
    --space-10: 4rem;
    --space-12: 5rem;
    --space-16: 6rem;
    --space-20: 8rem;

    --space-3xs: clamp(0.125rem, 0.1rem + 0.1vw, 0.25rem);
    --space-2xs: clamp(0.25rem, 0.2rem + 0.2vw, 0.375rem);
    --space-xs: clamp(0.5rem, 0.4rem + 0.35vw, 0.75rem);
    --space-sm: clamp(0.75rem, 0.6rem + 0.5vw, 1.1rem);
    --space-md: clamp(1rem, 0.8rem + 0.8vw, 1.6rem);
    --space-lg: clamp(1.5rem, 1rem + 1.4vw, 2.5rem);
    --space-xl: clamp(2.25rem, 1.4rem + 2.5vw, 4.25rem);
    --space-2xl: clamp(3.5rem, 2rem + 4vw, 6.5rem);
    --space-section: clamp(4rem, 6.5vw, 8.5rem);

    --section-xs: clamp(2rem, 4vw, 3rem);
    --section-sm: clamp(3rem, 5vw, 4.5rem);
    --section-md: clamp(4rem, 7vw, 6.5rem);
    --section-lg: clamp(5rem, 9vw, 8rem);
    --section-xl: clamp(6rem, 11vw, 10rem);

    /* =========================================================================
       07. FLUID CONTAINER & LAYOUT TOKENS
       ========================================================================= */
    --container-wide: min(100% - clamp(1.5rem, 4vw, 5rem), 96rem);
    --container-default: min(100% - clamp(2rem, 5vw, 7rem), 80rem);
    --container-max: var(--container-default);
    --container-narrow: min(100% - clamp(1.5rem, 4vw, 5rem), 56rem);
    --container-editorial: min(100% - clamp(1.25rem, 3.5vw, 4rem), 48rem);
    --container-prose: var(--container-editorial);
    --prose-max: 46rem;
    --grid-gap: clamp(1rem, 2vw, 2rem);

    /* =========================================================================
       08. RADII & SHADOWS
       ========================================================================= */
    --radius-none: 0;
    --radius-xs: 0.25rem;
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-pill: 9999px;
    --radius-circle: 50%;

    --shadow-none: none;
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 8px 24px rgba(8, 14, 35, 0.06);
    --shadow-lg: 0 16px 40px rgba(8, 14, 35, 0.10);
    --shadow-floating: 0 24px 60px rgba(35, 49, 110, 0.14);
    --shadow-modal: 0 30px 80px rgba(8, 14, 35, 0.25);

    /* Backward compatibility shadow aliases */
    --shadow-subtle: var(--shadow-sm);
    --shadow-card: var(--shadow-md);
    --shadow-hover: var(--shadow-lg);
    --shadow-3d: var(--shadow-floating);

    /* =========================================================================
       09. ANIMATIONS & TRANSITIONS
       ========================================================================= */
    --duration-fast: 150ms;
    --duration-normal: 250ms;
    --duration-medium: 350ms;
    --duration-slow: 400ms;
    --duration-reveal: 700ms;

    --ease-standard: cubic-bezier(0.25, 0.1, 0.25, 1);
    --ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);
    --ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);
    --ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1);
    --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.1);

    /* =========================================================================
       10. HEADER & NAVIGATION TOKENS
       ========================================================================= */
    --header-height: 5rem;
    --header-bg: rgba(255, 255, 255, 0.95);
    --nav-font: var(--font-heading);
    --nav-weight: 600;

    /* =========================================================================
       11. CENTRAL Z-INDEX LAYERING HIERARCHY
       ========================================================================= */
    --z-bg: 0;
    --z-base: 0;
    --z-decoration: 1;
    --z-media: 2;
    --z-visual: 2;
    --z-content: 5;
    --z-floating: 10;
    --z-header: 50;
    --z-overlay: 80;
    --z-drawer: 80;
    --z-modal: 100;
}