/* ======================================
    Colors & Design Tokens
=======================================*/

:root {

    /* ===== BACKGROUNDS ===== */
    /* Warm dark — lifted from pure black toward charcoal with a slight brown tint */
    --bg-primary: #1C1A17;
    --bg-secondary: #221F1B;
    --surface: rgba(255, 248, 235, 0.04);
    --surface-hover: rgba(255, 248, 235, 0.08);

    /* ===== BUTTONS ===== */
    --btn-primary: #FF6A3D;
    --btn-primary-hover: #ff865f;

    /* ===== TEXT ===== */
    /* Slightly warm whites — pure #FFF feels cold against the brown-tinted bg */
    --text-primary: #EDE8DF;
    --text-secondary: #A09890;
    --text-muted: #635C55;

    /* ===== BORDERS ===== */
    --border: rgba(255, 248, 235, 0.09);
    --border-strong: rgba(255, 248, 235, 0.16);

    /* ===== ACCENTS ===== */
    --accent-primary: #FF6A3D;
    --accent-primary-glow: rgba(255, 106, 61, 0.22);
    --accent-secondary: #7C6FCD;
    --accent-secondary-glow: rgba(124, 111, 205, 0.18);

    /* ===== GRADIENTS ===== */
    --gradient-hero: radial-gradient(ellipse 80% 60% at 50% -10%, rgba(255, 106, 61, 0.10) 0%, transparent 50%);
    --gradient-card: linear-gradient(135deg, rgba(255, 248, 235, 0.04) 0%, rgba(255, 248, 235, 0.01) 100%);

    /* ===== CARD SURFACE ===== */
    --card-bg: rgba(255, 248, 235, 0.03);

    /* ===== TRANSITIONS ===== */
    --ease-fast: 0.15s ease;
    --ease-base: 0.3s ease;
    --ease-slow: 0.5s ease;
}

/* ======================================
    Grain Overlay
=======================================*/

body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23grain)' opacity='1'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 200px 200px;
    opacity: 0.038;
    mix-blend-mode: overlay;
}