/**
 * Design Tokens — PRD Section 3 (Design System & UI/UX Guidelines)
 *
 * Every value below is taken directly from the PRD spec, not approximated.
 * All other stylesheets (bootstrap overrides, components, sections) should
 * reference these custom properties rather than hardcoding colors/sizes,
 * so the whole site stays visually consistent by construction — the PRD's
 * explicit requirement in 3.17 ("all cards should share one design
 * language") and 3.11 ("all primary buttons... must follow one unified
 * design system") are enforced structurally here, not by convention alone.
 */

:root {
    /* --- 3.4 Color Palette ------------------------------------------- */
    --color-primary: #7C3AED;
    --color-primary-hover: #6D28D9;
    --color-light-purple: #F5F1FF;
    --color-extra-light-purple: #FAF8FF;
    --color-background: #FFFFFF;
    /* 3.4 lists "Card Background: #FFFFFF" as its own token; components
       reference it by name, so it needs to exist rather than relying on a
       hardcoded fallback. */
    --color-card-background: #FFFFFF;
    --color-soft-background: #FAFAFC;
    --color-border: #ECECEC;
    --color-heading: #111111;
    --color-paragraph: #666666;
    --color-dark-section: #0B1020;
    --color-purple-glow: rgba(124, 58, 237, .20);

    /* Secondary accent — a warm gold borrowed from Natia's palette, used
       sparingly (badges, numbered markers, star ratings) so the site isn't
       purple-on-purple everywhere, the way Natia breaks up its dark hero
       with one warm accent against white/black. Never used for primary
       actions — --color-primary keeps that job. */
    --color-accent-warm: #E0A857;
    --color-accent-warm-soft: #FBF3E7;

    /* --- 3.5 Gradient System (use sparingly, per PRD) ----------------- */
    --gradient-white-to-purple: linear-gradient(180deg, var(--color-background) 0%, var(--color-light-purple) 100%);
    --gradient-purple-to-white: linear-gradient(180deg, var(--color-light-purple) 0%, var(--color-background) 100%);
    --gradient-glow-to-transparent: radial-gradient(circle, var(--color-purple-glow) 0%, transparent 70%);
    --gradient-button: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);

    /* --- 3.6 / 3.7 Typography ------------------------------------------ */
    --font-primary: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'Geist Mono', 'SFMono-Regular', Consolas, monospace;

    /* Clamp minimums are the PRD's stated floors, not smaller: 3.7 specifies
       60-72px for hero and 40-52px for section titles. An earlier version
       bottomed out at 40px/32px, which undershot the spec on narrow screens. */
    --fs-hero: clamp(2.25rem, 1.2rem + 4.5vw, 4.5rem);   /* ~36px mobile -> 72px desktop */
    --fs-section-title: clamp(1.75rem, 1.2rem + 2.4vw, 2.875rem); /* ~28px mobile -> 46px desktop */
    --fs-card-title: clamp(1.375rem, 2vw, 1.75rem); /* 22-28px */
    --fs-paragraph: 1.0625rem;                      /* 16-18px, mid-point */
    --fs-small: 0.875rem;                           /* 14px */
    --fs-button: 1rem;                              /* 16px */

    /* Bolder weight + tighter tracking on display type — an agency-style
       cue (Diligent leans on a heavy display font at -2% tracking) applied
       here to the existing Geist family rather than importing a new one,
       so headings read as more confident without changing the typeface. */
    --heading-weight: 700;
    --heading-tracking: -0.02em;

    /* --- 3.8 Border Radius --------------------------------------------- */
    --radius-button: 16px;
    --radius-card: 22px;
    --radius-image: 24px;
    --radius-form: 16px;
    --radius-section: 32px;

    /* --- 3.9 Shadow System (soft only, per PRD) ------------------------ */
    --shadow-card: 0 10px 40px rgba(0, 0, 0, .05);
    --shadow-card-hover: 0 16px 50px rgba(0, 0, 0, .08);
    --shadow-button-glow: 0 8px 24px var(--color-purple-glow);

    /* --- 3.10 Glass Effect (premium areas only) ------------------------ */
    --glass-blur: 24px;
    --glass-bg: rgba(255, 255, 255, .20);
    --glass-border: 1px solid rgba(255, 255, 255, .15);

    /* --- 3.13 Section Width --------------------------------------------- */
    --container-max-width: 1320px;

    /* --- 3.14 Spacing System --------------------------------------------- */
    --space-between-sections: 120px;
    --space-between-cards: 32px;
    --space-card-padding: 32px;
    --space-mobile-padding: 24px;
    --space-desktop-padding: 64px;

    /* --- 3.11 Button motion constants (driven via GSAP, not CSS transition,
       per Section 2.11 — but kept here as the single source of truth so
       JS and CSS never drift apart) ------------------------------------- */
    --button-hover-scale: 1.03;
    --button-active-scale: 0.98;
}

/* Reduced-motion users get instant state changes, never fully static UI —
   Section 11 / accessibility requirements (WCAG 2.3.3). GSAP timelines
   check this same media query at runtime (see resources/js/lib/motion.js)
   so this isn't just a CSS-only fallback that JS animations ignore. */
@media (prefers-reduced-motion: reduce) {
    :root {
        --button-hover-scale: 1;
        --button-active-scale: 1;
    }
}