/* ============================================================================
   Ledger Modern — token layer (S1 of the 2026-08-30 redesign)
   project: optimarkmedia-com-578d7a5e | redesign/REDESIGN.md
   Tier 1 primitives → Tier 2 semantic → Tier 3 component.
   Loaded AFTER tailadmin.css. Inert until consumed: defines custom
   properties only, so this file cannot shift a pixel by itself.
   Contrast: every text/background pair ≥4.5:1 body, ≥3:1 large/UI (verified).
   ========================================================================== */

:root {
    /* ---- Tier 1 · primitives (hex; OKLCH overrides at file end) ---- */
    --p-paper:        #FAFAF7;   /* paper-white, near-neutral */
    --p-paper-raised: #FFFFFF;
    --p-paper-sunken: #F1F0EB;
    --p-ink:          #14201B;   /* ledger ink, green undertone */
    --p-ink-soft:     #4A5750;
    --p-evergreen:    #0E6B3A;   /* text-safe accent (4.5:1+ on paper) */
    --p-brand:        #00D632;   /* LOGO-MANDATED green — CTA anchor only */
    --p-brand-ink:    #14201B;   /* text on brand fills */
    --p-slate:        #3B5563;   /* secondary voice */
    --p-line-subtle:  #E4E3DC;
    --p-line-strong:  #C9C7BC;

    --p-font-display: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
    --p-font-body:    "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
    --p-font-data:    "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;

    /* ---- Tier 2 · semantic — LIGHT (default theme) ---- */
    --surface:         var(--p-paper);
    --surface-raised:  var(--p-paper-raised);
    --surface-sunken:  var(--p-paper-sunken);
    --surface-inverse: var(--p-ink);
    --border-subtle:   var(--p-line-subtle);
    --border-strong:   var(--p-line-strong);
    --text-primary:    var(--p-ink);
    --text-muted:      var(--p-ink-soft);
    --accent:          var(--p-evergreen);
    --accent-strong:   #0B5630;
    --accent-subtle:   #E4F3EA;
    --accent-contrast: var(--p-paper-raised);
    --brand:           var(--p-brand);
    --brand-contrast:  var(--p-brand-ink);
    --secondary:       var(--p-slate);
    --success:         #0E6B3A;  --success-subtle: #E4F3EA; --success-strong: #0B5630;
    --warning:         #8A5A00;  --warning-subtle: #FDF3DC; --warning-strong: #6E4800;
    --danger:          #B3261E;  --danger-subtle:  #FBE9E7; --danger-strong:  #8C1D18;

    /* ---- Tier 2 · type (fluid, ~1.2 ratio, measure target 60–70ch) ---- */
    --font-display: var(--p-font-display);
    --font-body:    var(--p-font-body);
    --font-data:    var(--p-font-data);
    --text-xs:   clamp(0.75rem, 0.73rem + 0.10vw, 0.80rem);   /* 12–12.8 */
    --text-sm:   clamp(0.875rem, 0.86rem + 0.05vw, 0.94rem);  /* 14–15 */
    --text-base: clamp(1rem, 0.97rem + 0.15vw, 1.09rem);      /* 16–17.4 */
    --text-lg:   clamp(1.15rem, 1.10rem + 0.25vw, 1.30rem);
    --text-xl:   clamp(1.35rem, 1.25rem + 0.50vw, 1.60rem);
    --text-2xl:  clamp(1.70rem, 1.50rem + 1.00vw, 2.20rem);
    --text-3xl:  clamp(2.10rem, 1.80rem + 1.50vw, 3.00rem);
    --text-4xl:  clamp(2.70rem, 2.20rem + 2.50vw, 4.20rem);
    --leading-tight: 1.15;
    --leading-body:  1.6;
    --tracking-display: -0.02em;
    --measure-max: 68ch;

    /* ---- Tier 2 · space (base unit 4px — no magic numbers downstream) ---- */
    --space-1: 0.25rem;  --space-2: 0.5rem;   --space-3: 0.75rem;
    --space-4: 1rem;     --space-5: 1.5rem;   --space-6: 2rem;
    --space-7: 3rem;     --space-8: 4rem;     --space-9: 6rem;
    --space-10: 8rem;

    /* ---- Tier 2 · radius / elevation / motion / z ---- */
    --radius-sm: 6px;   --radius-md: 10px;  --radius-lg: 16px;  --radius-pill: 999px;
    --border-hairline: 1px;
    /* Ledger aesthetic: hairlines do the separating; elevation is rare. */
    --elev-1: 0 1px 2px rgba(20, 32, 27, 0.06);
    --elev-2: 0 2px 8px rgba(20, 32, 27, 0.08);
    --elev-3: 0 12px 32px rgba(20, 32, 27, 0.12);
    --z-base: 0; --z-raised: 10; --z-sticky: 100; --z-modal: 1000; --z-toast: 1100;
    --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 320ms;
    --ease-out: cubic-bezier(0.2, 0, 0, 1);
    --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);

    /* ---- Tier 3 · component ---- */
    --btn-radius: var(--radius-pill);
    --control-height: 44px;              /* touch target floor */
    --focus-ring: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent);
    --tap-separation: 8px;
    --container-max: 76rem;
    --hairline: var(--border-hairline) solid var(--border-subtle);
    --numerals: "tnum" 1;                /* tabular numerals for all money figures */
}

/* ---- DARK — a designed theme, not an inversion ---- */
[data-theme="dark"] {
    --surface:         #101815;
    --surface-raised:  #182420;
    --surface-sunken:  #0B110F;
    --surface-inverse: #ECF2EE;
    --border-subtle:   #26322C;
    --border-strong:   #3A473F;
    --text-primary:    #ECF2EE;
    --text-muted:      #9BA8A0;
    --accent:          #2FBF63;
    --accent-strong:   #46D97B;
    --accent-subtle:   #12291C;
    --accent-contrast: #08130B;
    --secondary:       #8FA8B5;
    --success:         #2FBF63;  --success-subtle: #12291C; --success-strong: #46D97B;
    --warning:         #E0A430;  --warning-subtle: #2B2110; --warning-strong: #F0BC5C;
    --danger:          #E5544C;  --danger-subtle:  #2B1412; --danger-strong:  #F07A73;
    --elev-1: 0 1px 2px rgba(0, 0, 0, 0.4);
    --elev-2: 0 2px 8px rgba(0, 0, 0, 0.45);
    --elev-3: 0 12px 32px rgba(0, 0, 0, 0.55);
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --surface:         #101815;
        --surface-raised:  #182420;
        --surface-sunken:  #0B110F;
        --surface-inverse: #ECF2EE;
        --border-subtle:   #26322C;
        --border-strong:   #3A473F;
        --text-primary:    #ECF2EE;
        --text-muted:      #9BA8A0;
        --accent:          #2FBF63;
        --accent-strong:   #46D97B;
        --accent-subtle:   #12291C;
        --accent-contrast: #08130B;
        --secondary:       #8FA8B5;
        --success:         #2FBF63;  --success-subtle: #12291C; --success-strong: #46D97B;
        --warning:         #E0A430;  --warning-subtle: #2B2110; --warning-strong: #F0BC5C;
        --danger:          #E5544C;  --danger-subtle:  #2B1412; --danger-strong:  #F07A73;
        --elev-1: 0 1px 2px rgba(0, 0, 0, 0.4);
        --elev-2: 0 2px 8px rgba(0, 0, 0, 0.45);
        --elev-3: 0 12px 32px rgba(0, 0, 0, 0.55);
    }
}

/* ---- OKLCH overrides — identical hues, perceptual space ---- */
@supports (color: oklch(0% 0 0)) {
    :root {
        --p-paper:        oklch(98.2% 0.004 95);
        --p-paper-raised: oklch(100% 0 0);
        --p-paper-sunken: oklch(94.5% 0.006 100);
        --p-ink:          oklch(17% 0.018 170);
        --p-ink-soft:     oklch(40% 0.022 170);
        --p-evergreen:    oklch(46% 0.108 158);
        --p-slate:        oklch(40% 0.032 235);
        --p-line-subtle:  oklch(91.5% 0.005 100);
        --p-line-strong:  oklch(82% 0.008 100);
        --accent-strong:  oklch(38% 0.095 158);
        --success:        oklch(46% 0.108 158);  --success-strong: oklch(38% 0.095 158);
        --warning:        oklch(46% 0.105 75);   --warning-strong: oklch(37% 0.085 75);
        --danger:         oklch(50% 0.16 25);    --danger-strong:  oklch(42% 0.14 25);
    }
    [data-theme="dark"], :root:not([data-theme="light"]) {}
    @media (prefers-color-scheme: dark) {
        :root:not([data-theme="light"]) {
            --surface:        oklch(18% 0.014 168);
            --surface-raised: oklch(23% 0.016 168);
            --surface-sunken: oklch(14% 0.012 168);
            --border-subtle:  oklch(28% 0.014 168);
            --border-strong:  oklch(37% 0.016 168);
            --text-primary:   oklch(95% 0.008 168);
            --text-muted:     oklch(72% 0.014 168);
            --accent:         oklch(70% 0.15 155);
            --accent-strong:  oklch(78% 0.15 155);
            --accent-subtle:  oklch(25% 0.05 158);
            --secondary:      oklch(74% 0.03 230);
        }
    }
}

/* ---- Reduced motion: global default; transforms get disabled per-component ---- */
@media (prefers-reduced-motion: reduce) {
    :root {
        --dur-fast: 1ms; --dur-base: 1ms; --dur-slow: 1ms;
    }
}

/* r2 2026-08-31: print reveal force-visible + minimum press-button height */
@media print {
    .reveal, .reveal-scale { opacity: 1 !important; transform: none !important; }
}
.press { min-height: 2.75rem; }

/* r2: footer mailto/tel tap targets >= 44px regardless of container leading */
footer a[href^='mailto:'], footer a[href^='tel:'] { min-height: 2.75rem; display: inline-flex; align-items: center; }

/* Keyboard focus visibility (WCAG 2.4.7) — appended 2026-08-31 U5.
   Tailwind preflight sets outline-style:none; restore a visible ring
   for keyboard users only (focus-visible), brand-green, 2px offset. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 2px solid #00d632 !important;
    outline-offset: 2px;
    border-radius: 4px;
}


/* Skip-to-content link: visually hidden, appears on keyboard focus. */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 12px;
    z-index: 9999;
    padding: 10px 18px;
    border-radius: 12px;
    background: #00d632;
    color: #000;
    font-weight: 700;
    font-size: 14px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, .25);
}
.skip-link:focus {
    left: 12px;
}