/* =========================================================
   00-tokens.css
   Design tokens for westernmac.com
   Colors, typography, spacing, sizing, motion, shadows
   ========================================================= */

:root {
    /* =========================
       COLOR SYSTEM
       ========================= */
    --color-bg: #000000;
    --color-surface: #1a1a1a;
    --color-surface-alt: #222222;
    --color-surface-soft: #333333;

    --color-border: #333333;
    --color-border-strong: #555555;

    --color-text: #ffffff;
    --color-text-muted: #cccccc;
    --color-text-soft: #aaaaaa;

    --color-brand: #cc0000;
    --color-brand-hover: #ff1a1a;
    --color-brand-soft: rgba(204, 0, 0, 0.10);
    --color-brand-faint: rgba(204, 0, 0, 0.08);

    --color-link: var(--color-brand);
    --color-link-hover: var(--color-text);

    --color-focus: var(--color-brand);

    /* =========================
       LEGACY ALIASES
       Keeps older CSS/html easier to migrate
       ========================= */
    --black: var(--color-bg);
    --dark-grey: var(--color-surface);
    --medium-grey: var(--color-border);
    --light-grey: var(--color-text-soft);
    --white: var(--color-text);
    --red: var(--color-brand);

    /* =========================
       TYPOGRAPHY
       ========================= */
    --font-body: 'Roboto Condensed', sans-serif;
    --font-heading: 'Oswald', sans-serif;
    --font-ui: 'Roboto Condensed', sans-serif;

    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    --line-height-tight: 1.2;
    --line-height-heading: 1.25;
    --line-height-body: 1.6;
    --line-height-relaxed: 1.75;

    --letter-spacing-tight: 0.02em;
    --letter-spacing-base: 0.04em;
    --letter-spacing-wide: 0.08em;
    --letter-spacing-wider: 0.12em;

    /* Fluid type scale */
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-md: 1.0625rem;
    --text-lg: 1.125rem;
    --text-xl: clamp(1.125rem, 2vw, 1.35rem);
    --text-2xl: clamp(1.35rem, 3vw, 1.8rem);
    --text-3xl: clamp(1.8rem, 5vw, 2.5rem);
    --text-4xl: clamp(2.2rem, 6vw, 3.5rem);

    /* Heading presets */
    --h1-size: var(--text-3xl);
    --h2-size: var(--text-2xl);
    --h3-size: clamp(1.1rem, 3vw, 1.4rem);

    /* =========================
       LAYOUT WIDTHS
       ========================= */
    --container-narrow: 760px;
    --container-base: 1100px;
    --container-wide: 1200px;
    --content-max: 1000px;

    /* =========================
       SPACING SCALE
       ========================= */
    --space-0: 0;
    --space-1: 0.25rem;   /* 4px */
    --space-2: 0.5rem;    /* 8px */
    --space-3: 0.75rem;   /* 12px */
    --space-4: 1rem;      /* 16px */
    --space-5: 1.25rem;   /* 20px */
    --space-6: 1.5rem;    /* 24px */
    --space-7: 1.75rem;   /* 28px */
    --space-8: 2rem;      /* 32px */
    --space-9: 2.5rem;    /* 40px */
    --space-10: 3rem;     /* 48px */
    --space-11: 3.5rem;   /* 56px */
    --space-12: 4rem;     /* 64px */

    /* Common section spacing */
    --section-space-y: var(--space-10);
    --section-space-y-sm: var(--space-8);

    /* =========================
       RADII
       ========================= */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-pill: 999px;

    /* =========================
       BORDERS
       ========================= */
    --border-width-thin: 1px;
    --border-width-base: 2px;
    --border-width-accent: 3px;
    --border-width-strong: 4px;

    /* =========================
       SHADOWS
       ========================= */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.18);
    --shadow-md: 0 5px 15px rgba(0, 0, 0, 0.30);
    --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.38);

    /* =========================
       MOTION
       ========================= */
    --ease-standard: ease;
    --duration-fast: 0.2s;
    --duration-base: 0.3s;
    --duration-slow: 0.45s;

    --transition-fast: all var(--duration-fast) var(--ease-standard);
    --transition-base: all var(--duration-base) var(--ease-standard);
    --transition-slow: all var(--duration-slow) var(--ease-standard);

    --transition: var(--transition-base);

    /* =========================
       COMPONENT SIZING
       ========================= */
    --header-padding-y: var(--space-8);
    --header-padding-y-tight: var(--space-5);

    --nav-padding-y: var(--space-3);

    --button-padding-y: 0.75rem;
    --button-padding-x: 1.5rem;
    --button-padding-x-lg: 1.875rem;

    --input-padding-y: 0.75rem;
    --input-padding-x: 0.9375rem;

    --card-padding: 1.25rem;
    --card-padding-lg: 1.5625rem;

    --hero-padding-y: 1.875rem;
    --hero-padding-x: 1.25rem;
    --hero-image-size: 200px;

    --profile-image-max: 400px;
    --side-image-max: 280px;

    /* =========================
       GRID / GAP
       ========================= */
    --gap-xs: 0.5rem;
    --gap-sm: 0.75rem;
    --gap-md: 1rem;
    --gap-lg: 1.25rem;
    --gap-xl: 1.875rem;

    /* =========================
       Z-INDEX
       ========================= */
    --z-base: 1;
    --z-nav: 10;
    --z-dropdown: 50;
    --z-overlay: 100;
    --z-modal: 1000;

    /* =========================
       BREAKPOINTS
       Use as reference in comments/media sections
       ========================= */
    --bp-xs: 480px;
    --bp-sm: 640px;
    --bp-md: 768px;
    --bp-lg: 1024px;
    --bp-xl: 1280px;
}

/* =========================================================
   Reduced motion preference
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
    :root {
        --duration-fast: 0.01ms;
        --duration-base: 0.01ms;
        --duration-slow: 0.01ms;

        --transition-fast: none;
        --transition-base: none;
        --transition-slow: none;
        --transition: none;
    }
}