/* =========================================
   DESIGN TOKENS & CSS VARIABLES
   ========================================= */

:root {
    /* Semantic tokens */
    --page-bg: var(--forest-dark);
    --page-bg-alt: rgba(24, 85, 60, 0.9);
    --text-primary: var(--dew-white);
    --text-muted: rgba(244, 249, 242, 0.78);
    --glass-bg: rgba(24, 85, 60, 0.45);
    --glass-border: rgba(244, 249, 242, 0.22);
    --glass-strong-bg: rgba(24, 85, 60, 0.65);
    --surface-soft: rgba(126, 200, 148, 0.18);
    --surface-strong: rgba(126, 200, 148, 0.32);
    --accent: var(--moss-green);
    --accent-muted: rgba(104, 185, 132, 0.18);
    --accent-contrast: var(--forest-dark);

    /* Spacing & Sizing */
    --radius-sm: 14px;
    --radius-lg: 28px;
    --nav-scroll-offset: 4rem;

    /* Typography */
    --font-sans: "Inter", "Segoe UI", sans-serif;

    /* Form inputs */
    --input-surface: rgba(244, 249, 242, 0.92);
    --input-border: rgba(24, 85, 60, 0.22);
    --input-focus: rgba(104, 185, 132, 0.3);

    /* =================================
       TRANSITION TOKENS (DRY)
       ================================= */
    --transition-fast: 150ms ease;
    --transition-medium: 200ms ease;
    --transition-slow: 300ms ease;
    --transition-bounce: 220ms ease;

    /* =================================
       SHADOW TOKENS (DRY)
       ================================= */
    --shadow-lg: 0 30px 70px rgba(8, 40, 28, 0.45);
    --shadow-card: 0 28px 60px rgba(13, 52, 38, 0.18);
    --shadow-card-hover: 0 28px 64px rgba(11, 61, 46, 0.16);
    --shadow-subtle: 0 16px 40px rgba(13, 52, 38, 0.12);
    --shadow-nav: 0 10px 24px rgba(8, 40, 28, 0.45);

    /* =================================
       BORDER TOKENS (DRY)
       ================================= */
    --border-subtle: rgba(22, 90, 54, 0.14);
    --border-light: rgba(22, 90, 54, 0.18);
    --border-card: 1px solid rgba(22, 90, 54, 0.14);

    /* Forest Dark variants */
    --forest-dark-90: rgba(24, 85, 60, 0.9);
    --forest-dark-85: rgba(24, 85, 60, 0.85);
    --forest-dark-65: rgba(24, 85, 60, 0.65);
    --forest-dark-62: rgba(24, 85, 60, 0.62);
    --forest-dark-45: rgba(24, 85, 60, 0.45);
    --forest-dark-solid: rgba(24, 85, 60, 1);

    /* Dew White variants */
    --dew-white-92: rgba(244, 249, 242, 0.92);
    --dew-white-78: rgba(244, 249, 242, 0.78);
    --dew-white-75: rgba(244, 249, 242, 0.75);
    --dew-white-30: rgba(244, 249, 242, 0.30);
    --dew-white-24: rgba(244, 249, 242, 0.24);
    --dew-white-22: rgba(244, 249, 242, 0.22);
    --dew-white-20: rgba(244, 249, 242, 0.2);
    --dew-white-12: rgba(244, 249, 242, 0.12);
    --dew-white-0: rgba(244, 249, 242, 0);

    /* Shadow color variants */
    --shadow-dark-45: rgba(8, 40, 28, 0.45);
    --shadow-dark-28: rgba(8, 40, 28, 0.28);
    --shadow-dark-25: rgba(8, 40, 28, 0.25);
    --shadow-dark-12: rgba(8, 40, 28, 0.12);

    /* Moss Green variants */
    --moss-green-30: rgba(104, 185, 132, 0.3);
    --moss-green-20: rgba(104, 185, 132, 0.2);
    --moss-green-18: rgba(104, 185, 132, 0.18);
    --moss-green-35: rgba(104, 185, 132, 0.35);

    /* Sage Green variants */
    --sage-green-92: rgba(230, 244, 234, 0.92);
    --sage-green-90: rgba(230, 244, 234, 0.9);
    --sage-green-85: rgba(217, 237, 216, 0.85);
    --sage-green-80: rgba(217, 237, 216, 0.8);
    --sage-green-50: rgba(230, 244, 234, 0.5);
    --sage-green-35: rgba(217, 237, 216, 0.35);
    --sage-green-0: rgba(230, 244, 234, 0);

    /* Other colors */
    --sky-blue-28: rgba(135, 191, 202, 0.28);
    --forest-mid-12: rgba(11, 61, 46, 0.12);
}