/* ==========================================================================
   Brand Tokens — Gerwyn Price "The Iceman" Merchandise Platform
   ==========================================================================
   Pass 1 placeholder tokens. Values will be refined in Pass 2 (Figma brand skin).
   All custom CSS must reference these variables — no hard-coded brand values.
   ========================================================================== */

@font-face {
    font-family: 'Inter Tight';
    src: url('/fonts/InterTight-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter Tight';
    src: url('/fonts/InterTight-Italic-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}

:root {
    /* --- Colour palette --- */
    --brand-primary: #0a0a0a;
    --brand-primary-rgb: 10, 10, 10;
    --brand-secondary: #1a1a2e;
    --brand-accent: #00d4ff;
    --brand-accent-hover: #00b8dd;
    --brand-accent-rgb: 0, 212, 255;
    --brand-cta: #00d4ff;
    --brand-cta-hover: #00b8dd;
    --brand-cta-rgb: 0, 212, 255;
    --brand-surface: #ffffff;
    --brand-surface-alt: #f7f7f8;
    --brand-surface-dark: #0a0a0a;
    --brand-surface-dark-alt: #121212;
    --brand-border: #e0e0e0;
    --brand-border-dark: #2a2a2a;

    /* --- Text colours --- */
    --brand-text: #1a1a2e;
    --brand-text-muted: #6c757d;
    --brand-text-light: #ffffff;
    --brand-text-light-muted: rgba(255, 255, 255, 0.7);
    --brand-text-on-accent: #0a0a0a;
    --brand-text-on-cta: #0a0a0a;

    /* --- Status colours --- */
    --brand-success: #28a745;
    --brand-warning: #ffc107;
    --brand-danger: #dc3545;
    --brand-info: #00d4ff;

    /* --- Typography --- */
    --brand-font-heading: 'Inter Tight', system-ui, -apple-system, sans-serif;
    --brand-font-body: 'Inter Tight', system-ui, -apple-system, sans-serif;
    --brand-font-mono: 'Cascadia Code', 'Fira Code', monospace;

    --brand-font-weight-light: 300;
    --brand-font-weight-normal: 400;
    --brand-font-weight-medium: 500;
    --brand-font-weight-semibold: 600;
    --brand-font-weight-bold: 700;
    --brand-font-weight-extrabold: 800;

    --brand-line-height-tight: 1.1;
    --brand-line-height-normal: 1.5;
    --brand-line-height-relaxed: 1.75;

    --brand-letter-spacing-tight: -0.02em;
    --brand-letter-spacing-normal: 0;
    --brand-letter-spacing-wide: 0.05em;
    --brand-letter-spacing-caps: 0.1em;

    /* --- Spacing scale (matches Bootstrap 5 scale) --- */
    --brand-space-1: 0.25rem;
    --brand-space-2: 0.5rem;
    --brand-space-3: 1rem;
    --brand-space-4: 1.5rem;
    --brand-space-5: 3rem;
    --brand-space-section: 4rem;
    --brand-space-hero: 6rem;

    /* --- Borders and radii --- */
    --brand-radius-sm: 0.25rem;
    --brand-radius: 0.375rem;
    --brand-radius-lg: 0.5rem;
    --brand-radius-pill: 50rem;
    --brand-radius-circle: 50%;

    /* --- Shadows --- */
    --brand-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --brand-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    --brand-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
    --brand-shadow-card: 0 2px 12px rgba(0, 0, 0, 0.06);

    /* --- Transitions --- */
    --brand-transition-fast: 150ms ease;
    --brand-transition: 250ms ease;
    --brand-transition-slow: 400ms ease;

    /* --- Z-index layers --- */
    --brand-z-dropdown: 1000;
    --brand-z-sticky: 1020;
    --brand-z-fixed: 1030;
    --brand-z-modal-backdrop: 1040;
    --brand-z-modal: 1050;
    --brand-z-toast: 1090;

    /* --- Layout --- */
    --brand-header-height: 4rem;
    --brand-header-height-mobile: 3.5rem;
    --brand-max-width-content: 1320px;
    --brand-max-width-narrow: 720px;
}