/* ─────────────────────────────────────────────────────────────────
   tokens.css — Corporate Green Classic design system
   PANTONE 355 CVU as the brand pillar; supporting neutrals; gold reserved
   for trust accents only (badges, awards). Mobile-first 8px scale.
   ───────────────────────────────────────────────────────────────── */

:root {
    /* Brand — muted forest green, gradient-first */
    --color-green:        #3f8451;         /* anchor — replaces PANTONE 355 brightness */
    --color-green-dark:   #2e6e3f;
    --color-green-darker: #1f5731;
    --color-green-soft:   #e6efe8;
    --color-green-mist:   #f1f6f2;
    /* Gradient — preferred surface for primary CTAs, hero accents, brand fills.
       Light edge → anchor → dark edge for a refined, dimensional finish. */
    --color-green-gradient: linear-gradient(135deg, #4f9560 0%, #3f8451 55%, #2e6e3f 100%);
    --color-green-gradient-hover: linear-gradient(135deg, #3f8451 0%, #2e6e3f 55%, #1f5731 100%);

    /* Moss — mid-tone organic green for elegant secondary surfaces */
    --color-moss:         #5A7A52;
    --color-moss-soft:    #DCE6D7;

    /* Ink + neutrals — slight warm tint for editorial feel */
    --color-ink:          #161E18;         /* warmer than #18201A */
    --color-ink-soft:     #2C342D;
    --color-muted:        #5A6259;
    --color-muted-soft:   #889088;
    --color-bg:           #FFFFFF;
    --color-bg-soft:      #F7F9F5;         /* warmer mint-cream */
    --color-bg-tint:      #EEF2EC;
    --color-cream:        #FBFAF4;         /* warm parchment surface */
    --color-border:       #DCE2D8;
    --color-border-soft:  #E8EDE5;

    /* Trust accent — gold stays warm, refined */
    --color-gold:         #B0913D;         /* deeper, more amber */
    --color-gold-light:   #D4B266;
    --color-gold-soft:    #F4EBD0;
    --color-gold-deep:    #8C7128;

    /* Logo — theme-aware so the inline SVG colours follow light/dark without DOM swap */
    --logo-mark-color:    #2e6e3f;         /* dark green wordmark on light cream bg */
    --logo-tag-color:     #2e6e3f;

    /* Status */
    --color-danger:       #C0392B;
    --color-danger-soft:  #FBE8E5;
    --color-success:      #1F8B45;
    --color-success-soft: #E0F1E5;
    --color-warning:      #C77C0F;
    --color-warning-soft: #FAE9D2;

    /* 8-point spacing scale */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;
    --space-9: 96px;
    --space-10: 128px;

    /* Radii */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;
    --radius-pill: 999px;

    /* Shadows */
    --shadow-xs: 0 1px 2px rgba(24, 32, 26, .04);
    --shadow-sm: 0 2px 4px rgba(24, 32, 26, .06);
    --shadow-md: 0 4px 12px rgba(24, 32, 26, .08);
    --shadow-lg: 0 12px 32px rgba(24, 32, 26, .12);

    /* Type — system-font stack only.
       'Plus Jakarta Sans' and 'Inter' were listed here but are not self-hosted
       and would silently fall through to the system stack anyway. Removed to
       avoid a third-party font request race and improve CLS (no FOUT).
       If woff2 files are ever added, re-introduce them with @font-face +
       font-display: swap and <link rel="preload"> in base.twig. */
    --font-head: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-body: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-mono: ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, Consolas, monospace;

    --fs-xs:   .8125rem;   /* 13px */
    --fs-sm:   .875rem;    /* 14px */
    --fs-base: 1rem;       /* 16px */
    --fs-lg:   1.125rem;   /* 18px */
    --fs-xl:   1.375rem;   /* 22px */
    --fs-2xl:  1.75rem;    /* 28px */
    --fs-3xl:  2.25rem;    /* 36px */
    --fs-4xl:  3rem;       /* 48px */

    /* Fluid heading sizes — preserve a minimum readable size at narrow
       viewports while scaling up smoothly to the design max at wide ones. */
    --fs-hero:    clamp(2.25rem, 1.4rem + 3.6vw, 4rem);
    --fs-h1:      clamp(1.875rem, 1.25rem + 2.2vw, 2.75rem);
    --fs-h2:      clamp(1.5rem,  1.15rem + 1.5vw, 2.125rem);
    --fs-h3:      clamp(1.2rem,  1rem + .9vw, 1.5rem);
    --fs-display: clamp(1.625rem, 1.25rem + 2.1vw, 2.5rem);
    --fs-eyebrow: .75rem;

    /* Tracking */
    --tracking-tight: -0.015em;
    --tracking-snug:  -0.01em;
    --tracking-base:  0;
    --tracking-wide:  0.04em;

    --lh-tight: 1.15;
    --lh-snug:  1.3;
    --lh-base:  1.55;
    --lh-loose: 1.75;

    --fw-regular: 400;
    --fw-medium:  500;
    --fw-semibold: 600;
    --fw-bold:    700;

    /* Layout */
    --content-width: 1200px;
    --content-narrow: 800px;
    --header-height-desktop: 96px;
    --header-height-mobile: 64px;

    /* Motion — three named curves for different intents.
       --ease (smooth)   for general transitions
       --ease-out-expo   for entrance / settle, more decisive arrivals
       --ease-spring     for press/release with a hair of overshoot */
    --ease:           cubic-bezier(.4, 0, .2, 1);
    --ease-out-expo:  cubic-bezier(.16, 1, .3, 1);
    --ease-spring:    cubic-bezier(.34, 1.56, .64, 1);
    --duration-fast: 120ms;
    --duration-base: 200ms;
    --duration-slow: 320ms;

    /* Z-index scale */
    --z-skip: 100;
    --z-header: 50;
    --z-dropdown: 40;
    --z-overlay: 60;
    --z-drawer: 70;
    --z-modal: 80;
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --duration-fast: 0ms;
        --duration-base: 0ms;
        --duration-slow: 0ms;
    }
}

/* ─────────────────────────────────────────────────────────────────
   Dark theme — opt-in via [data-theme="dark"] on <html>.
   When a user has not chosen, prefers-color-scheme: dark applies.
   The brand green stays warm; surfaces shift to deep ink-greens.
   Contrast targets WCAG AA (≥4.5:1 body, ≥3:1 large/UI) verified
   against #3f8451 brand and the ink palette below.
   ───────────────────────────────────────────────────────────────── */

/* ─── Dark theme: dark forest + moss + warm gold ─────────────────
   Inspired by var-7-emerald.html (#131e11 mossy black, #50C878 emerald,
   #8AA882 sage) and concept-7-luxury.html (warm gold #C9A962). Warmer
   and more organic than a generic "dark mode green"; reads as a
   handsome forest interior rather than a cold app surface. */
[data-theme="dark"] {
    /* Brand — emerald-lifted for AA contrast on deep moss bg */
    --color-green:        #3FCB75;     /* warmer than prior #2DC766 */
    --color-green-dark:   #2BA85B;
    --color-green-darker: #1F8848;
    --color-green-soft:   #1B3324;     /* deeper mossy tint */
    --color-green-mist:   #11201A;

    /* Moss accent — for secondary surfaces and muted decoration */
    --color-moss:         #8AA882;     /* sage from emerald palette */
    --color-moss-soft:    #2A3A2A;     /* deep moss tile */

    /* Text — warm-tinted off-white, sage muted */
    --color-ink:          #EDF2EE;     /* slight green undertone */
    --color-ink-soft:     #C8D2C8;
    --color-muted:        #A0AC9F;     /* sage-muted */
    --color-muted-soft:   #6F7A6E;

    /* Surfaces — forest base, mossy mid, warm tint */
    --color-bg:           #0F1A12;     /* deep forest near-black */
    --color-bg-soft:      #16241A;     /* mossy charcoal */
    --color-bg-tint:      #1F3024;     /* warmer moss tile */
    --color-cream:        #1A271D;     /* "warm tile" equivalent */

    /* Borders — must clear 3:1 vs --color-bg (#0F1A12) for WCAG 1.4.11
       Non-text UI (cards, fieldsets, dividers). Previous #2A3D33 yielded
       1.32:1 — cards looked borderless. Bumped to a brighter sage that
       sits between the surface and ink for clean tile separation. */
    --color-border:       #3F5A4B;     /* 3.1:1 vs bg — AA pass */
    --color-border-soft:  #2A3D33;     /* old border value, still subtle */

    /* Gold — WARMER, more amber-leaning for premium feel on dark */
    --color-gold:         #D4B266;     /* warm honeyed gold */
    --color-gold-light:   #E5CC8A;
    --color-gold-soft:    #2E2614;     /* deep gold-shadow tile */
    --color-gold-deep:    #B8973E;

    /* Status — slightly desaturated to match mossy palette */
    --color-danger:       #E5675A;
    --color-danger-soft:  #341915;
    --color-success:      #4FC077;
    --color-success-soft: #14291D;
    --color-warning:      #E59A3D;
    --color-warning-soft: #2E2113;

    /* Shadows — slightly green-tinted black for organic warmth */
    --shadow-xs: 0 1px 2px rgba(8, 14, 10, .42);
    --shadow-sm: 0 2px 4px rgba(8, 14, 10, .52);
    --shadow-md: 0 4px 12px rgba(8, 14, 10, .60);
    --shadow-lg: 0 16px 40px rgba(8, 14, 10, .70);

    /* Logo — cream wordmark + sage tagline against deep forest bg */
    --logo-mark-color:    #EDF2EE;
    --logo-tag-color:     #A0AC9F;

    color-scheme: dark;
}

/* Auto-dark for users with no explicit preference — only when no
   data-theme attribute is set (the toggle JS adds the attr on first use).
   Mirrors the [data-theme="dark"] palette exactly. */
@media (prefers-color-scheme: dark) {
    html:not([data-theme]) {
        --color-green:        #3FCB75;
        --color-green-dark:   #2BA85B;
        --color-green-darker: #1F8848;
        --color-green-soft:   #1B3324;
        --color-green-mist:   #11201A;
        --color-moss:         #8AA882;
        --color-moss-soft:    #2A3A2A;
        --color-ink:          #EDF2EE;
        --color-ink-soft:     #C8D2C8;
        --color-muted:        #A0AC9F;
        --color-muted-soft:   #6F7A6E;
        --color-bg:           #0F1A12;
        --color-bg-soft:      #16241A;
        --color-bg-tint:      #1F3024;
        --color-cream:        #1A271D;
        --color-border:       #3F5A4B;
        --color-border-soft:  #2A3D33;
        --color-gold:         #D4B266;
        --color-gold-light:   #E5CC8A;
        --color-gold-soft:    #2E2614;
        --color-gold-deep:    #B8973E;
        --color-danger:       #E5675A;
        --color-danger-soft:  #341915;
        --color-success:      #4FC077;
        --color-success-soft: #14291D;
        --color-warning:      #E59A3D;
        --color-warning-soft: #2E2113;
        --shadow-xs: 0 1px 2px rgba(8, 14, 10, .42);
        --shadow-sm: 0 2px 4px rgba(8, 14, 10, .52);
        --shadow-md: 0 4px 12px rgba(8, 14, 10, .60);
        --shadow-lg: 0 16px 40px rgba(8, 14, 10, .70);
        --logo-mark-color:    #EDF2EE;
        --logo-tag-color:     #A0AC9F;
        color-scheme: dark;
    }
}

/* ─────────────────────────────────────────────────────────────────
   High-contrast mode — respects prefers-contrast: more.
   Increases border widths, removes translucent overlays, enforces
   maximum-contrast text colours for WCAG AAA-adjacent legibility.
   ───────────────────────────────────────────────────────────────── */
@media (prefers-contrast: more) {
    :root {
        /* Raise borders to solid, higher-contrast values */
        --color-border:       #737873;
        --color-border-soft:  #8C918A;
        /* Drop shadow translucency — use solid outlines instead */
        --shadow-xs: 0 0 0 1px #737873;
        --shadow-sm: 0 0 0 1px #737873;
        --shadow-md: 0 0 0 2px #737873;
        --shadow-lg: 0 0 0 2px #5A6259;
        /* Push muted text toward maximum contrast */
        --color-muted:        #3A433A;
        --color-muted-soft:   #4A544A;
    }

    /* Remove semi-transparent overlays that reduce contrast */
    ::selection,
    ::-moz-selection {
        background: var(--color-green);
        color: #fff;
    }
}