/* ============================================================
   NimeDocs Design Tokens
   All colors, typography, spacing, shadows, and radii in one place.
   ============================================================ */

:root {
    /* ── Brand Colors (WCAG AA compliant: 4.5:1+ on white) ── */
    --color-primary:        #12856e;
    --color-primary-dark:   #0f7a64;
    --color-primary-darker: #0d6f5b;
    --color-primary-light:  #e6f7f3;
    --color-primary-pale:   #f0fdf9;
    --color-primary-rgb:    18, 133, 110;

    /* ── Neutrals ── */
    --color-charcoal:       #1a1a2e;
    --color-text:           #2f4050;
    --color-text-secondary: #6b7280;
    --color-text-tertiary:  #a7b6c2;
    --color-border:         #e5e7eb;
    --color-border-light:   #f0f0f0;
    --color-bg-off-white:   #f9fafb;
    --color-bg-light:       #f3f4f6;
    --color-white:          #ffffff;

    /* ── Accent / Semantic ── */
    --color-coral:          #ed5565;
    --color-amber:          #f8ac59;
    --color-blue:           #1976d2;
    --color-coral-light:    #fef2f2;
    --color-amber-light:    #fffbeb;
    --color-blue-light:     #eff6ff;

    /* ── Typography ── */
    --font-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
    --font-mono:  'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

    --text-hero:    clamp(2.25rem, 4vw, 3.5rem);
    --text-h2:      clamp(1.75rem, 3vw, 2.5rem);
    --text-h3:      clamp(1.25rem, 2vw, 1.75rem);
    --text-h4:      1.25rem;
    --text-lg:      1.125rem;
    --text-base:    1rem;
    --text-sm:      0.875rem;
    --text-xs:      0.75rem;

    --leading-tight:  1.15;
    --leading-snug:   1.3;
    --leading-normal: 1.6;
    --leading-loose:  1.75;

    --weight-normal:    400;
    --weight-medium:    500;
    --weight-semibold:  600;
    --weight-bold:      700;

    /* ── Spacing (8px grid) ── */
    --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-8:   2rem;      /* 32px */
    --space-10:  2.5rem;    /* 40px */
    --space-12:  3rem;      /* 48px */
    --space-16:  4rem;      /* 64px */
    --space-20:  5rem;      /* 80px */
    --space-24:  6rem;      /* 96px */
    --space-32:  8rem;      /* 128px */

    /* ── Layout ── */
    --container-max:   1200px;
    --container-wide:  1440px;
    --nav-height:      72px;
    --section-padding: var(--space-24);

    /* ── Shadows ── */
    --shadow-xs:   0 1px 2px rgba(0,0,0,0.04);
    --shadow-sm:   0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    --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 16px 48px rgba(0,0,0,0.14);
    --shadow-nav:  0 1px 3px rgba(0,0,0,0.08);
    --shadow-card-hover: 0 8px 30px rgba(0,0,0,0.10);
    --shadow-primary: 0 4px 14px rgba(var(--color-primary-rgb), 0.3);

    /* ── Radius ── */
    --radius-sm:   6px;
    --radius-md:   8px;
    --radius-lg:   12px;
    --radius-xl:   16px;
    --radius-2xl:  24px;
    --radius-pill: 9999px;

    /* ── Transitions ── */
    --ease-out:  cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --duration-fast:   150ms;
    --duration-normal: 250ms;
    --duration-slow:   400ms;

    /* ── Z-Index ── */
    --z-dropdown: 100;
    --z-sticky:   200;
    --z-overlay:  300;
    --z-modal:    400;
    --z-toast:    500;
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
    :root {
        --duration-fast:   0ms;
        --duration-normal: 0ms;
        --duration-slow:   0ms;
    }
}

/* ── Responsive section padding ── */
@media (max-width: 991px) {
    :root {
        --section-padding: var(--space-20);
    }
}
@media (max-width: 767px) {
    :root {
        --section-padding: var(--space-16);
    }
}