/* ============================================================
   INDIGENIOUS DESIGN SYSTEM — Shared Tokens
   v1.0 | March 2026
   Source of truth: variants/option-definitive.html
   ============================================================ */

:root {
    /* === BRAND: Deep Forest Green === */
    --forest-50:  #ECFDF5;
    --forest-100: #D1FAE5;
    --forest-200: #A7F3D0;
    --forest-300: #6EE7A0;
    --forest-400: #34D070;
    --forest-500: #1B6B3A;
    --forest-600: #155C2E;
    --forest-700: #104A24;
    --forest-800: #0C3B1C;
    --forest-900: #082914;

    /* === BRAND: Deep Indigo === */
    --indigo-50:  #EEF2FF;
    --indigo-100: #E0E7FF;
    --indigo-200: #C7D2FE;
    --indigo-300: #A5B4FC;
    --indigo-400: #818CF8;
    --indigo-500: #4F46E5;
    --indigo-600: #4338CA;
    --indigo-700: #3730A3;
    --indigo-800: #312E81;
    --indigo-900: #1E1B4B;

    /* === NEUTRALS === */
    --neutral-0:   #FFFFFF;
    --neutral-50:  #F9FAFB;
    --neutral-100: #F3F4F6;
    --neutral-200: #E5E7EB;
    --neutral-300: #D1D5DB;
    --neutral-400: #9CA3AF;
    --neutral-500: #6B7280;
    --neutral-600: #4B5563;
    --neutral-700: #374151;
    --neutral-800: #1F2937;
    --neutral-900: #111827;

    /* === SEMANTIC ALIASES === */
    --text-primary:   var(--neutral-900);
    --text-secondary: var(--neutral-500);
    --text-light:     var(--neutral-400);
    --bg-white:       var(--neutral-0);
    --bg-light:       var(--neutral-50);
    --border:         var(--neutral-200);
    --dark-section:   var(--neutral-900);

    /* Legacy aliases (mapped to new tokens) */
    --primary:       var(--neutral-900);
    --accent:        var(--forest-500);
    --accent-dark:   var(--forest-600);
    --emerald:       var(--forest-500);
    --emerald-dark:  var(--forest-600);
    --emerald-light: var(--forest-50);
    --indigo:        var(--indigo-500);
    --indigo-dark:   var(--indigo-600);
    --indigo-light:  var(--indigo-50);
    --gold:          #D4A843;

    /* === DARK UI === */
    --dark-text-primary:   rgba(255, 255, 255, 0.95);
    --dark-text-secondary: rgba(255, 255, 255, 0.70);
    --dark-text-tertiary:  rgba(255, 255, 255, 0.50);
    --dark-text-muted:     rgba(255, 255, 255, 0.30);
    --dark-border:         rgba(255, 255, 255, 0.10);
    --overlay-light-2:     rgba(255, 255, 255, 0.08);
    --overlay-light-3:     rgba(255, 255, 255, 0.12);

    /* === TYPOGRAPHY === */
    --text-xs:   0.75rem;
    --text-sm:   0.875rem;
    --text-base: 1rem;
    --text-md:   1.125rem;
    --text-lg:   1.25rem;
    --text-xl:   1.5rem;
    --text-2xl:  2rem;
    --text-3xl:  2.5rem;
    --text-4xl:  3rem;
    --text-5xl:  3.75rem;

    /* === SPACING === */
    --space-1:  0.25rem;
    --space-2:  0.5rem;
    --space-3:  0.75rem;
    --space-4:  1rem;
    --space-6:  1.5rem;
    --space-8:  2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;

    /* === RADIUS === */
    --radius-sm:   0.375rem;
    --radius-md:   0.5rem;
    --radius-lg:   0.75rem;
    --radius-xl:   1rem;
    --radius-2xl:  1.5rem;
    --radius-full: 9999px;

    /* === SHADOWS === */
    --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg:  0 8px 24px rgba(0, 0, 0, 0.10);
    --shadow-xl:  0 12px 40px rgba(0, 0, 0, 0.12);
    --shadow-forest:    0 4px 20px rgba(27, 107, 58, 0.25);
    --shadow-forest-lg: 0 8px 30px rgba(27, 107, 58, 0.35);
    --shadow-indigo:    0 4px 20px rgba(79, 70, 229, 0.25);
    --shadow-glow:      0 0 60px rgba(27, 107, 58, 0.20), 0 0 120px rgba(79, 70, 229, 0.10);

    /* === GRADIENTS === */
    --gradient-brand: linear-gradient(135deg, var(--forest-500) 0%, var(--indigo-500) 100%);
    --gradient-hero-text: linear-gradient(135deg, var(--forest-300) 0%, var(--indigo-300) 100%);

    /* === MOTION === */
    --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
    --duration-fast: 150ms;
    --duration-normal: 300ms;

    /* === LAYOUT === */
    --max-width-wide:    1400px;
    --max-width-content: 1200px;
    --max-width-narrow:  800px;
    --max-width-text:    700px;
}

/* ============================================================
   LOGO — Locked accent-i (immune to all nav states)
   ============================================================ */
.logo-accent-i {
    color: var(--forest-500) !important;
    -webkit-text-fill-color: var(--forest-500) !important;
    position: relative;
    display: inline-block;
    transition: none !important;
}

.logo-accent-i::after {
    content: '';
    position: absolute;
    background: var(--indigo-500) !important;
    border-radius: 50%;
    width: 0.22em;
    height: 0.22em;
    top: 0.30em;
    left: 50%;
    transform: translateX(-50%);
}

nav .logo-accent-i,
nav.scrolled .logo-accent-i {
    color: var(--forest-500) !important;
    -webkit-text-fill-color: var(--forest-500) !important;
}

/* ============================================================
   ACCESSIBILITY — WCAG 2.1 AA
   ============================================================ */

/* Skip navigation link */
.skip-nav {
    position: absolute;
    top: -100%;
    left: 1rem;
    z-index: 9999;
    background: var(--forest-500);
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-md);
    font-weight: 600;
    text-decoration: none;
    transition: top 0.2s;
}
.skip-nav:focus {
    top: 1rem;
}

/* Focus visible for keyboard navigation */
*:focus-visible {
    outline: 2px solid var(--forest-500);
    outline-offset: 2px;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--forest-500);
    outline-offset: 2px;
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}