/* =====================================================================
   AI Executives — Design Tokens
   Single source of truth. Every value here is taken verbatim from the
   AI Executives Brand Identity System v1.0 (2025).
   ===================================================================== */

:root {
    /* ----- Primary palette ----- */
    --aie-gold:        #C9A96E;   /* Primary brand colour */
    --aie-gold-light:  #F0D48A;   /* Highlights, display type on dark */
    --aie-gold-dark:   #9A7030;   /* Type on light, CTA buttons, shadows */
    --aie-gold-mid:    #D4B97C;   /* Wordmark, subheadings */

    --aie-noir:        #08080E;   /* Primary background (dark contexts) */
    --aie-ivory:       #F4F0E8;   /* Light background, cards, print base */

    /* ----- Secondary / structure ----- */
    --aie-navy:        #0D1B2A;   /* Headers, hero sections */
    --aie-steel:       #3A4A5C;   /* Body text, secondary buttons */
    --aie-steel-light: #5B7083;   /* Captions, muted text, borders */
    --aie-mist:        #E8EEF4;   /* Input backgrounds, section dividers */
    --aie-charcoal:    #1C1C1E;   /* Dark cards, footer background */
    --aie-white:       #FFFFFF;   /* Page base, content areas */

    /* ----- Functional accent (use only for status) ----- */
    --aie-sage:        #4A6741;   /* Success */
    --aie-sage-light:  #6B8F62;   /* Success hover */
    --aie-copper:      #B5651D;   /* Warnings */
    --aie-burgundy:    #8B2E2E;   /* Errors */

    /* ----- Hairlines ----- */
    --aie-hair-on-light: rgba(91, 112, 131, 0.22);   /* Steel-Light @ 22% */
    --aie-hair-on-dark:  rgba(201, 169, 110, 0.22);  /* Gold @ 22% */

    /* ----- Type ----- */
    --aie-display: 'Cinzel', 'Playfair Display', Georgia, 'Times New Roman', serif;
    --aie-body:    'Josefin Sans', 'Inter', system-ui, -apple-system, sans-serif;

    /* Type scale — modular, ratio ~1.333 (perfect fourth) */
    --aie-text-xs:  0.6875rem;   /* 11px — caption / label */
    --aie-text-sm:  0.8125rem;   /* 13px — supporting */
    --aie-text-md:  1rem;        /* 16px — body */
    --aie-text-lg:  1.125rem;    /* 18px — lead */
    --aie-text-xl:  clamp(1.5rem, 2.4vw, 1.875rem);    /* h3 */
    --aie-text-2xl: clamp(1.875rem, 3.4vw, 2.5rem);    /* h2 */
    --aie-text-3xl: clamp(2.25rem, 4.8vw, 3.5rem);     /* h1 standard */
    --aie-text-4xl: clamp(2.75rem, 6vw, 4.5rem);       /* hero h1 */

    --aie-leading-tight:  1.1;
    --aie-leading-snug:   1.3;
    --aie-leading-normal: 1.6;
    --aie-leading-loose:  1.8;

    --aie-tracking-tight:  -0.005em;
    --aie-tracking-normal:  0;
    --aie-tracking-wide:    0.02em;
    --aie-tracking-wider:   0.18em;
    --aie-tracking-widest:  0.32em;

    /* ----- Spacing scale ----- */
    --aie-space-1: 0.25rem;
    --aie-space-2: 0.5rem;
    --aie-space-3: 0.75rem;
    --aie-space-4: 1rem;
    --aie-space-5: 1.5rem;
    --aie-space-6: 2rem;
    --aie-space-7: 2.5rem;
    --aie-space-8: 3.5rem;
    --aie-space-9: 5rem;
    --aie-space-10: 7rem;

    /* ----- Layout ----- */
    --aie-container: 1180px;
    --aie-container-narrow: 760px;
    --aie-gutter: clamp(1.25rem, 4vw, 2.5rem);

    /* Section vertical rhythm — three steps:
       sm  → tight breathing (between paired blocks on same surface)
       md  → default section padding
       lg  → emphasis sections (numbers, investment, cta, fit)
       The hero uses an extended top: --aie-section-y-first.
       The space between a section head and its body uses --aie-section-head-gap. */
    --aie-section-y-sm:    clamp(3.5rem, 6vh, 5rem);
    --aie-section-y:       clamp(5.5rem, 10vh, 8rem);
    --aie-section-y-lg:    clamp(7rem, 13vh, 10.5rem);
    --aie-section-y-first: clamp(4rem, 8vh, 6.5rem);
    --aie-section-head-gap: clamp(2.5rem, 5vh, 4rem);
    --aie-banner-y:        clamp(3rem, 6vh, 5rem);

    /* ----- Radius (very restrained, brandbook is print-first) ----- */
    --aie-radius: 2px;

    /* ----- Motion (single curve, opacity only) ----- */
    --aie-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --aie-dur:  600ms;
}

/* =====================================================================
   Surface contexts
   .aie-surface-light is the default. Add .aie-surface-dark to a section
   (or the body via PHP) to flip text/border colours coherently.
   ===================================================================== */

.aie-surface-light,
body {
    --aie-bg:        var(--aie-white);
    --aie-bg-inset:  var(--aie-ivory);
    --aie-text:      var(--aie-steel);
    --aie-text-soft: var(--aie-steel-light);
    --aie-heading:   var(--aie-charcoal);
    --aie-accent:    var(--aie-gold-dark);
    --aie-rule:      var(--aie-gold-dark);
    --aie-hair:      var(--aie-hair-on-light);
}

/* Inset surface — ivory paper, same text colours as light. Use to break
   adjacent white sections without changing typography colour. */
.aie-surface-inset {
    --aie-bg:        var(--aie-ivory);
    --aie-bg-inset:  var(--aie-white);
    --aie-text:      var(--aie-steel);
    --aie-text-soft: var(--aie-steel-light);
    --aie-heading:   var(--aie-charcoal);
    --aie-accent:    var(--aie-gold-dark);
    --aie-rule:      var(--aie-gold-dark);
    --aie-hair:      var(--aie-hair-on-light);
}

.aie-surface-dark {
    --aie-bg:        var(--aie-noir);
    --aie-bg-inset:  var(--aie-charcoal);
    --aie-text:      var(--aie-mist);
    --aie-text-soft: #A8B0BB;
    --aie-heading:   var(--aie-ivory);
    --aie-accent:    var(--aie-gold);
    --aie-rule:      var(--aie-gold);
    --aie-hair:      var(--aie-hair-on-dark);
}

.aie-surface-navy {
    --aie-bg:        var(--aie-navy);
    --aie-bg-inset:  #0E1F32;
    --aie-text:      var(--aie-mist);
    --aie-text-soft: #A8B0BB;
    --aie-heading:   var(--aie-ivory);
    --aie-accent:    var(--aie-gold);
    --aie-rule:      var(--aie-gold);
    --aie-hair:      rgba(232, 238, 244, 0.16);
}