/* =========================================================
   WOLFBOND
   Global Design Tokens
   ========================================================= */

:root {
    /* -----------------------------------------------------
       Core colors
       ----------------------------------------------------- */

    --color-black: #000000;
    --color-background: #000000;

    --color-surface: #070809;
    --color-surface-soft: #0b0c0d;
    --color-surface-light: #111214;

    --color-white: #ffffff;
    --color-white-soft: #e8e8e8;

    --color-grey-light: #b8b8b8;
    --color-grey: #858585;
    --color-grey-dark: #4a4a4a;

    --color-red: #a70d13;
    --color-red-light: #d01820;
    --color-red-dark: #65070b;

    --color-gold: #b98a52;

    /* -----------------------------------------------------
       Transparent colors
       ----------------------------------------------------- */

    --color-white-90: rgba(255, 255, 255, 0.90);
    --color-white-75: rgba(255, 255, 255, 0.75);
    --color-white-60: rgba(255, 255, 255, 0.60);
    --color-white-40: rgba(255, 255, 255, 0.40);
    --color-white-25: rgba(255, 255, 255, 0.25);
    --color-white-15: rgba(255, 255, 255, 0.15);
    --color-white-10: rgba(255, 255, 255, 0.10);
    --color-white-06: rgba(255, 255, 255, 0.06);

    --color-black-95: rgba(0, 0, 0, 0.95);
    --color-black-90: rgba(0, 0, 0, 0.90);
    --color-black-80: rgba(0, 0, 0, 0.80);
    --color-black-75: rgba(0, 0, 0, 0.75);
    --color-black-60: rgba(0, 0, 0, 0.60);
    --color-black-40: rgba(0, 0, 0, 0.40);

    --color-red-60: rgba(167, 13, 19, 0.60);
    --color-red-30: rgba(167, 13, 19, 0.30);
    --color-red-20: rgba(167, 13, 19, 0.20);
    --color-red-10: rgba(167, 13, 19, 0.10);

    /* -----------------------------------------------------
       Typography
       ----------------------------------------------------- */

    --font-display:
        "Cinzel",
        "Times New Roman",
        serif;

    --font-body:
        "Montserrat",
        "Segoe UI",
        Arial,
        sans-serif;

    --font-logo:
        "Cinzel",
        "Times New Roman",
        serif;

    --font-size-xs: 0.70rem;
    --font-size-sm: 0.80rem;
    --font-size-base: 1rem;
    --font-size-md: 1.10rem;
    --font-size-lg: 1.35rem;
    --font-size-xl: 1.75rem;
    --font-size-2xl: clamp(2rem, 4vw, 3.5rem);
    --font-size-3xl: clamp(3rem, 7vw, 6.5rem);

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

    --letter-spacing-tight: 0.04em;
    --letter-spacing-normal: 0.12em;
    --letter-spacing-wide: 0.22em;
    --letter-spacing-extra-wide: 0.38em;

    --line-height-tight: 1.10;
    --line-height-normal: 1.50;
    --line-height-relaxed: 1.80;

    /* -----------------------------------------------------
       Layout
       ----------------------------------------------------- */

    --container-width: 1180px;
    --container-wide: 1380px;
    --container-narrow: 860px;

    --page-padding: clamp(1.25rem, 4vw, 4rem);
    --header-height: 96px;

    --section-space-xs: clamp(2rem, 4vw, 4rem);
    --section-space-sm: clamp(3rem, 6vw, 6rem);
    --section-space-md: clamp(4rem, 8vw, 8rem);
    --section-space-lg: clamp(6rem, 11vw, 11rem);

    /* -----------------------------------------------------
       Spacing scale
       ----------------------------------------------------- */

    --space-1: 0.25rem;
    --space-2: 0.50rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.50rem;
    --space-8: 2rem;
    --space-10: 2.50rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;
    --space-32: 8rem;

    /* -----------------------------------------------------
       Borders and radii
       ----------------------------------------------------- */

    --border-width: 1px;

    --border-color: rgba(255, 255, 255, 0.18);
    --border-color-soft: rgba(255, 255, 255, 0.10);
    --border-color-strong: rgba(255, 255, 255, 0.35);
    --border-color-red: rgba(167, 13, 19, 0.85);

    --radius-xs: 2px;
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 14px;
    --radius-round: 999px;

    /* -----------------------------------------------------
       Shadows
       ----------------------------------------------------- */

    --shadow-small:
        0 10px 30px rgba(0, 0, 0, 0.35);

    --shadow-medium:
        0 20px 60px rgba(0, 0, 0, 0.50);

    --shadow-large:
        0 30px 100px rgba(0, 0, 0, 0.75);

    --shadow-red:
        0 0 30px rgba(167, 13, 19, 0.25);

    --text-shadow:
        0 3px 20px rgba(0, 0, 0, 0.80);

    /* -----------------------------------------------------
       Transitions
       ----------------------------------------------------- */

    --transition-fast: 160ms ease;
    --transition-base: 280ms ease;
    --transition-slow: 500ms ease;

    --transition-cinematic:
        700ms cubic-bezier(0.22, 1, 0.36, 1);

    /* -----------------------------------------------------
       Layer system
       ----------------------------------------------------- */

    --z-background: -1;
    --z-base: 1;
    --z-content: 10;
    --z-header: 100;
    --z-navigation: 200;
    --z-modal: 1000;
}

/* =========================================================
   Responsive token adjustments
   ========================================================= */

@media (max-width: 900px) {
    :root {
        --header-height: 82px;
        --page-padding: clamp(1rem, 4vw, 2rem);
    }
}

@media (max-width: 640px) {
    :root {
        --header-height: 76px;
        --page-padding: 1rem;

        --section-space-xs: 2.5rem;
        --section-space-sm: 3.5rem;
        --section-space-md: 4.5rem;
        --section-space-lg: 6rem;
    }
}