/* ==========================================================================
   Addison Notary: design tokens
   Source of truth: docs/BRAND-GUIDE.md and docs/research/03-brand-design-accessibility.md

   Every colour pair below was contrast-checked with the WCAG 2.1
   relative-luminance formula, unrounded. The ratio is recorded in a comment
   next to each token that carries text, so a future change is checkable
   without re-deriving the maths.
   ========================================================================== */

:root {
    /* ---- Brand: Green (primary) --------------------------------------- */
    --green-50:  #F1F8F4;
    --green-100: #DDEFE5;
    --green-200: #BCDFCB;
    --green-300: #8FC7A9;
    --green-400: #5AA681;
    --green-500: #35855F;
    --green-600: #236B4B;   /* 6.41:1 on white: hover fill */
    --green-700: #1B5E44;   /* 7.69:1 on white AAA: PRIMARY */
    --green-800: #134430;   /* 11.07:1 AAA */
    --green-900: #0C2E20;   /* 14.71:1 AAA */

    /* ---- Brand: Ink (structural authority) ----------------------------- */
    --ink-900: #0E1A30;     /* 17.37:1 AAA */
    --ink-800: #12203A;     /* 16.24:1 AAA: headings */
    --ink-700: #16243D;     /* 15.51:1 AAA */

    /* ---- Brand: Brass (accent) ----------------------------------------- */
    --brass-300: #D9B968;   /* dark-mode accent only */
    --brass-500: #B08A3E;   /* 3.21:1: NON-TEXT ONLY (rules, hairlines) */
    --brass-700: #7A5C22;   /* 6.21:1 white, 5.31:1 on paper: the text-safe brass */

    /* ---- Neutrals (green-leaning, so they harmonise with the brand) ---- */
    --n-50:  #F7FAF8;
    --n-100: #EFF4F1;
    --n-200: #E3E8E5;
    --n-300: #CBD3CE;       /* decorative only: 1.53:1 */
    --n-400: #A3AEA8;       /* decorative only: 2.29:1 */
    --n-500: #78857E;       /* 3.85:1: form borders, passes SC 1.4.11 everywhere */
    --n-600: #596660;       /* 6.01:1 AA: muted text */
    --n-700: #434E48;       /* 8.67:1 AAA */
    --n-800: #33403A;       /* 10.85:1 AAA: body text */
    --n-900: #1A211E;       /* 16.40:1 AAA */

    --white: #FFFFFF;
    --paper: #F0EDE6;       /* warm paper: body 9.28:1, headings 13.89:1 */

    /* ---- Semantic ------------------------------------------------------- */
    --success:      #14663E;  /* 7.00:1 AAA */
    --success-tint: #E9F5EE;
    --warning:      #8A5A00;  /* 5.93:1 AA */
    --warning-tint: #FDF4E3;
    --error:        #B3261E;  /* 6.54:1 AA */
    --error-tint:   #FDECEA;
    --info:         #1C5D99;  /* 6.83:1 AA */
    --info-tint:    #EAF2FA;

    /* ---- Applied roles (what components actually reference) ------------- */
    --color-bg:           var(--white);
    --color-bg-alt:       var(--n-50);
    --color-bg-muted:     var(--n-100);
    --color-surface:      var(--white);
    --color-surface-2:    var(--n-50);
    --color-surface-brand:var(--green-50);
    --color-text:         var(--n-800);
    --color-text-strong:  var(--ink-800);
    --color-text-muted:   var(--n-600);
    --color-text-invert:  var(--white);
    --color-heading:      var(--ink-800);
    --color-brand:        var(--green-700);
    --color-brand-hover:  var(--green-600);
    --color-brand-deep:   var(--green-800);
    --color-on-brand:     var(--white);
    --color-accent:       var(--brass-700);
    --color-accent-rule:  var(--brass-500);
    --color-border:       var(--n-200);
    --color-border-strong:var(--n-500);
    --color-focus:        var(--ink-800);
    --color-selection-bg: #CFE6DA;

    /* ---- Typography ----------------------------------------------------- */
    --font-serif: "Source Serif 4", Charter, "Bitstream Charter", Georgia, serif;
    --font-sans:  Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    --font-mono:  ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

    --text-display:  clamp(2.25rem, 1.2rem + 4.5vw, 4rem);
    --text-h1:       clamp(2rem, 1.2rem + 3.4vw, 3.25rem);
    --text-h2:       clamp(1.625rem, 1.1rem + 2.2vw, 2.5rem);
    --text-h3:       clamp(1.375rem, 1.05rem + 1.4vw, 2rem);
    --text-h4:       clamp(1.25rem, 1.05rem + 0.8vw, 1.625rem);
    --text-h5:       1.3125rem;
    --text-h6:       1.0625rem;
    --text-body:     1.0625rem;   /* 17px base: premium sites read larger */
    --text-lead:     clamp(1.125rem, 1rem + 0.5vw, 1.1875rem);
    --text-small:    0.875rem;
    --text-label:    0.8125rem;
    --text-button:   1rem;

    --leading-tight:  1.15;
    --leading-snug:   1.35;
    --leading-normal: 1.65;
    --leading-loose:  1.8;

    --measure: 68ch;   /* Butterick: 45–90 characters per line */

    /* ---- Spacing (4px base) --------------------------------------------- */
    --space-1:  0.25rem;
    --space-2:  0.5rem;
    --space-3:  0.75rem;
    --space-4:  1rem;
    --space-5:  1.5rem;
    --space-6:  2rem;
    --space-7:  2.5rem;
    --space-8:  3rem;
    --space-9:  4rem;
    --space-10: 5rem;
    --space-11: 6rem;
    --space-12: 8rem;

    --section-y: clamp(3.5rem, 2rem + 6vw, 6.5rem);
    /* 0.75rem floor, not 1rem: at a 320px viewport, the WCAG 1.4.10 Reflow
       target, the extra 8px of combined side padding was the last thing
       pushing the header past the viewport edge. */
    --gutter:    clamp(0.75rem, 0.5rem + 2vw, 2rem);
    --container: 1180px;
    --container-narrow: 760px;
    --container-wide:   1400px;

    /* ---- Radii ----------------------------------------------------------- */
    --radius-sm:   4px;
    --radius:      8px;
    --radius-md:   12px;
    --radius-lg:   18px;
    --radius-xl:   28px;
    --radius-full: 999px;

    /* ---- Elevation: soft and green-tinted, never grey-black ------------- */
    --shadow-xs: 0 1px 2px rgba(12, 46, 32, 0.06);
    --shadow-sm: 0 2px 6px rgba(12, 46, 32, 0.07), 0 1px 2px rgba(12, 46, 32, 0.05);
    --shadow:    0 6px 18px rgba(12, 46, 32, 0.08), 0 2px 5px rgba(12, 46, 32, 0.05);
    --shadow-lg: 0 16px 40px rgba(12, 46, 32, 0.11), 0 4px 10px rgba(12, 46, 32, 0.06);
    --shadow-xl: 0 28px 68px rgba(12, 46, 32, 0.15), 0 8px 18px rgba(12, 46, 32, 0.07);

    /* ---- Motion ---------------------------------------------------------- */
    --ease:        cubic-bezier(0.4, 0, 0.2, 1);
    --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
    --duration-fast: 140ms;
    --duration:      240ms;
    --duration-slow: 420ms;

    /* ---- Layering --------------------------------------------------------- */
    --z-base: 1;
    --z-sticky: 100;
    --z-header: 200;
    --z-drawer: 300;
    --z-modal: 400;
    --z-toast: 500;
    --z-skip: 600;

    /* Height of the mobile sticky CTA bar. Used for scroll-padding-bottom so a
       focused element is never hidden behind it (WCAG 2.2 SC 2.4.11). */
    --sticky-cta-height: 4.25rem;
}

/* ==========================================================================
   Dark mode
   Guarded so an explicit data-theme="light" always wins over the OS setting.
   ========================================================================== */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --color-bg:            #0B1411;
        --color-bg-alt:        #121D19;
        --color-bg-muted:      #1A2722;
        --color-surface:       #121D19;
        --color-surface-2:     #1A2722;
        --color-surface-brand: #152A21;
        --color-text:          #E9F0EC;   /* 16.16:1 on bg */
        --color-text-strong:   #F4F8F6;
        --color-text-muted:    #A0B0A8;   /* 7.63:1 on surface */
        --color-text-invert:   #0B1411;
        --color-heading:       #F4F8F6;
        --color-brand:         #6FC49B;   /* 8.95:1 on bg */
        --color-brand-hover:   #8AD3AF;
        --color-brand-deep:    #B6E5CC;
        --color-on-brand:      #0B1411;   /* 8.95:1 on the green fill */
        --color-accent:        #D9B968;   /* 9.88:1 on bg */
        --color-accent-rule:   #B08A3E;
        --color-border:        #24332C;
        --color-border-strong: #5E7268;   /* 3.64:1: passes SC 1.4.11 */
        --color-focus:         #D9B968;
        --color-selection-bg:  #1F4635;
        --paper:               #121D19;

        --success:      #6ED89C;
        --success-tint: #12291E;
        --warning:      #F0B75C;
        --warning-tint: #2B2113;
        --error:        #FF8A80;
        --error-tint:   #2E1715;
        --info:         #7FB8EE;
        --info-tint:    #14222E;

        --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
        --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.45);
        --shadow:    0 6px 18px rgba(0, 0, 0, 0.5);
        --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.55);
        --shadow-xl: 0 28px 68px rgba(0, 0, 0, 0.6);
    }
}

/* Manual dark toggle: identical values, applied regardless of OS preference. */
:root[data-theme="dark"] {
    --color-bg:            #0B1411;
    --color-bg-alt:        #121D19;
    --color-bg-muted:      #1A2722;
    --color-surface:       #121D19;
    --color-surface-2:     #1A2722;
    --color-surface-brand: #152A21;
    --color-text:          #E9F0EC;
    --color-text-strong:   #F4F8F6;
    --color-text-muted:    #A0B0A8;
    --color-text-invert:   #0B1411;
    --color-heading:       #F4F8F6;
    --color-brand:         #6FC49B;
    --color-brand-hover:   #8AD3AF;
    --color-brand-deep:    #B6E5CC;
    --color-on-brand:      #0B1411;
    --color-accent:        #D9B968;
    --color-accent-rule:   #B08A3E;
    --color-border:        #24332C;
    --color-border-strong: #5E7268;
    --color-focus:         #D9B968;
    --color-selection-bg:  #1F4635;
    --paper:               #121D19;

    --success:      #6ED89C;
    --success-tint: #12291E;
    --warning:      #F0B75C;
    --warning-tint: #2B2113;
    --error:        #FF8A80;
    --error-tint:   #2E1715;
    --info:         #7FB8EE;
    --info-tint:    #14222E;

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.45);
    --shadow:    0 6px 18px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.55);
    --shadow-xl: 0 28px 68px rgba(0, 0, 0, 0.6);
}