/* ============================================================
   WINGENIOUS ESTATE — SHARED BRAND TOKENS (single source of truth)
   ------------------------------------------------------------
   This file is the canonical brand contract. An IDENTICAL copy
   of the --wg-* block lives in every estate property:
     - wingenious.ai/src/styles/brand-tokens.css
     - freeaudit.ai/app/brand-tokens.css
     - aibreakfastclub.co.uk/css/brand.css (this file, tokens block)
   When the brand changes, edit the token block in ALL repos so
   the sites never drift apart. New code should reference --wg-*
   or the role tokens mapped below.
   ------------------------------------------------------------
   AI BREAKFAST CLUB ROLE INVERSION: on this property AMBER is
   the primary accent (CTAs, headline em emphasis) and CYAN is
   the secondary (eyebrows, labels, data, the Wingenious lockup).
   The estate's other properties run the opposite way round.
   ============================================================ */
:root {
  /* Surfaces — dark editorial */
  --wg-bg:        #08090d;
  --wg-bg-soft:   #0d1118;
  --wg-bg-card:   #11161f;
  --wg-bg-card-2: #161c27;
  --wg-hairline:  #1b2230;

  /* Ink */
  --wg-text:      #f5f5f3;
  --wg-text-2:    #cbd0db;
  --wg-text-mute: #818a9d;
  --wg-text-dim:  #5b6371;

  /* Accents — cyan is the signal, amber the secondary warmth */
  --wg-cyan:      #22e0ff;  /* primary: emphasis, CTAs, data */
  --wg-cyan-2:    #6ff0ff;  /* hover */
  --wg-cyan-deep: #0a8aad;
  --wg-amber:     #ffb05e;  /* eyebrows, labels, secondary */
  --wg-green:     #22c08a;  /* success / positive trend */
  --wg-red:       #ff6e5c;
  --wg-on-cyan:   #04161b;  /* text on cyan fills */

  /* Type */
  --wg-font-display: "Bricolage Grotesque", system-ui, sans-serif;
  --wg-font-body:    "Inter Tight", "Inter", system-ui, sans-serif;
  --wg-font-mono:    "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace;

  /* Form language */
  --wg-radius-btn: 0;        /* buttons are square */
  --wg-radius-card: 8px;     /* cards carry a small radius */
  --wg-eyebrow-tracking: 0.18em;
}

/* ------------------------------------------------------------
   AIBC role tokens (dark default) — amber leads, cyan supports
   ------------------------------------------------------------ */
:root {
  --bg:            var(--wg-bg);
  --bg-soft:       var(--wg-bg-soft);
  --bg-card:       var(--wg-bg-card);
  --bg-card-2:     var(--wg-bg-card-2);
  --bg-deep:       #04050a;
  --hairline:      var(--wg-hairline);
  --hairline-soft: #141a25;
  --text:          var(--wg-text);
  --text-2:        var(--wg-text-2);
  --text-mute:     var(--wg-text-mute);
  --text-dim-2:    var(--wg-text-dim);

  --accent:        var(--wg-amber);   /* primary: CTAs, headline em */
  --accent-2:      #ffc687;           /* amber hover (derived; no estate amber-2) */
  --accent-deep:   #c77f36;
  --on-accent:     #1b1002;           /* warm near-black on amber fills */
  --accent-cool:   var(--wg-cyan);    /* secondary: eyebrows, labels, lockup */
  --accent-cool-2: var(--wg-cyan-2);
  --accent-faint:  rgba(255, 176, 94, 0.08);

  --signal:        var(--wg-green);
  --red:           var(--wg-red);
  --green:         var(--wg-green);

  --ff-display: var(--wg-font-display);
  --ff-body:    var(--wg-font-body);
  --ff-mono:    var(--wg-font-mono);

  /* Spacing scale (estate) */
  --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;

  /* Legacy aliases — the pre-estate AIBC token names, remapped so
     untouched page CSS keeps resolving during the migration. */
  --bg-elevated:  var(--bg-card-2);
  --text-mid:     var(--text-2);
  --text-dim:     var(--text-mute);
  --accent-dark:  var(--accent-2);
  --rule:         var(--hairline);
  --font-serif:   var(--ff-display);
  --font-sans:    var(--ff-body);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --col-gap: 32px;

  color-scheme: dark;
}

/* Light counterpart. The resolved palette is set on <html> by the
   pre-paint script in includes/theme.php; without JS the theme stays
   dark (the brand default). Accents deepen so amber/cyan hold WCAG AA
   on near-white, matching the estate light palette. */
html[data-palette="light"] {
  --bg:            #f7f8fa;
  --bg-soft:       #f0f2f6;
  --bg-card:       #ffffff;
  --bg-card-2:     #f3f5f8;
  --bg-deep:       #e8ebf1;
  --hairline:      #dde2ea;
  --hairline-soft: #e8ecf2;
  --text:          #10141c;
  --text-2:        #3c4657;
  --text-mute:     #5c6675;
  --text-dim-2:    #8a92a1;

  --accent:        #9a5b00;   /* deepened amber stays primary */
  --accent-2:      #7d4a00;
  --accent-deep:   #b06f10;
  --on-accent:     #ffffff;
  --accent-cool:   #077499;
  --accent-cool-2: #06627f;
  --accent-faint:  rgba(154, 91, 0, 0.08);

  --signal:        #147a54;
  --red:           #c0392b;
  --green:         #147a54;

  color-scheme: light;
}

/* ------------------------------------------------------------
   Base
   ------------------------------------------------------------ */
body {
  background: var(--bg);
  color: var(--text-2);
  font-family: var(--ff-body);
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--accent); color: var(--on-accent); }

/* Any in-page jump target clears the fixed nav */
:target, section[id], [id].reg-card { scroll-margin-top: 96px; }

:focus-visible { outline: 2px solid var(--accent-cool); outline-offset: 2px; }

/* Condensed-heavy estate headings; em snaps back to normal width,
   lighter, italic, in the primary accent (amber here). */
h1, h2, h3, h4 {
  font-family: var(--ff-display);
  color: var(--text);
  letter-spacing: -0.025em;
  line-height: 1.02;
  font-weight: 700;
  font-variation-settings: "wdth" 90, "opsz" 96;
}
h1 em, h2 em, h3 em {
  font-style: italic;
  color: var(--accent);
  font-variation-settings: "wdth" 100, "opsz" 96;
  font-weight: 500;
}

/* Fixed radial atmosphere — amber glow top-right, cyan low-left.
   Pages opt in with <body class="atmosphere">. */
body.atmosphere::before {
  content: "";
  position: fixed; inset: 0; pointer-events: none;
  background:
    radial-gradient(60% 50% at 85% -10%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 60%),
    radial-gradient(40% 30% at 5% 110%, color-mix(in srgb, var(--accent-cool) 10%, transparent), transparent 70%);
  z-index: 0;
}
body.atmosphere > main,
body.atmosphere > section,
body.atmosphere > footer { position: relative; z-index: 1; }
/* Nav/header keep their own positioning (fixed); never override it here -
   a position:relative would un-fix them. Their z-index already exceeds
   the atmosphere layer's 0. */

/* Section rhythm: top hairlines, no zebra backgrounds.
   scroll-margin keeps anchor jumps clear of the fixed nav. */
.h-section { padding: var(--space-9) 0; border-top: 1px solid var(--hairline); position: relative; scroll-margin-top: 96px; }
.h-section--deep { background: var(--bg-deep); }
.h-section--card { background: var(--bg-card); }
@media (max-width: 720px) {
  .h-section { padding: var(--space-7) 0; }
}

/* ------------------------------------------------------------
   Buttons — square, with the nudging arrow
   ------------------------------------------------------------ */
.h-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px;
  font-family: var(--ff-body); font-size: 14px; font-weight: 600;
  letter-spacing: -0.005em;
  background: var(--accent); color: var(--on-accent);
  text-decoration: none;
  border: 1px solid var(--accent);
  border-radius: var(--wg-radius-btn);
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
  box-shadow: 0 8px 24px -10px color-mix(in srgb, var(--accent) 60%, transparent);
}
.h-btn:hover {
  background: var(--accent-2); color: var(--on-accent); border-color: var(--accent-2);
  transform: translateY(-1px); text-decoration: none;
  box-shadow: 0 12px 32px -8px color-mix(in srgb, var(--accent) 70%, transparent);
}
.h-btn--ghost {
  background: transparent; color: var(--text);
  border-color: color-mix(in srgb, var(--text) 30%, transparent);
  box-shadow: none;
}
.h-btn--ghost:hover { background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--text); border-color: var(--text); box-shadow: none; }
.h-btn--lg { padding: 18px 28px; font-size: 15px; }
.h-btn--sm { padding: 10px 16px; font-size: 12px; }
.h-btn__arrow { width: 14px; height: 14px; transition: transform 0.18s ease; flex-shrink: 0; }
.h-btn:hover .h-btn__arrow { transform: translateX(4px); }

/* ------------------------------------------------------------
   Eyebrows — mono, uppercase, 24px leading rule.
   AIBC default is cyan (the inverted secondary); --warm for amber.
   ------------------------------------------------------------ */
.h-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--ff-mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent-cool);
}
.h-eyebrow::before { content: ""; width: 24px; height: 1px; background: var(--accent-cool); }
.h-eyebrow--warm { color: var(--accent); }
.h-eyebrow--warm::before { background: var(--accent); }

/* ------------------------------------------------------------
   Theme switcher (light / auto / dark)
   ------------------------------------------------------------ */
.theme-switcher {
  display: inline-flex; align-items: stretch;
  border: 1px solid var(--hairline);
}
.theme-switcher[hidden] { display: none; }
.theme-switcher__btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 34px;
  background: transparent; border: 0; padding: 0; cursor: pointer;
  color: var(--text-mute);
  transition: color 0.15s ease, background 0.15s ease;
}
.theme-switcher__btn svg { width: 15px; height: 15px; }
.theme-switcher__btn:hover { color: var(--text); }
.theme-switcher__btn[aria-pressed="true"] {
  color: var(--text);
  background: color-mix(in srgb, var(--text) 10%, transparent);
}

/* ------------------------------------------------------------
   Wingenious lockup — the estate anchor in the footer.
   Logo is a currentColor CSS mask so it recolours per theme.
   ------------------------------------------------------------ */
.wg-lockup { text-align: center; padding: var(--space-6) 0; border-bottom: 1px solid var(--hairline); }
.wg-lockup__powered {
  display: block;
  font-family: var(--ff-mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-mute);
  margin-bottom: 10px;
}
.wg-lockup__logo {
  display: inline-block;
  width: 132px; height: 24px; /* logo aspect ratio 5.605:1 */
  background-color: currentColor;
  -webkit-mask: url(/images/wingenious-logo.svg) center / contain no-repeat;
          mask: url(/images/wingenious-logo.svg) center / contain no-repeat;
}
a.wg-lockup__link { color: var(--accent-cool); transition: color 0.18s ease; text-decoration: none; display: inline-block; }
a.wg-lockup__link:hover { color: var(--accent-cool-2); }
.wg-lockup__strapline {
  margin: 12px 0 0;
  font-family: var(--ff-body); font-size: 0.9rem; font-style: italic;
  color: var(--text-mute);
}
.wg-lockup__strapline em { color: var(--accent); font-style: italic; }

/* Sister brands in the estate */
.wg-estate { padding: 34px 0; border-bottom: 1px solid var(--hairline); }
.wg-estate__label {
  display: block; text-align: center;
  font-family: var(--ff-mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-mute); margin-bottom: 18px;
}
.wg-estate__list {
  list-style: none; margin: 0 auto; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
  max-width: 1000px;
}
.wg-estate__list a {
  display: block; height: 100%;
  padding: 15px 16px; text-decoration: none;
  border: 1px solid var(--hairline); border-radius: var(--wg-radius-card);
  background: var(--bg-card);
  transition: border-color 0.18s ease, background 0.18s ease;
}
.wg-estate__list a:hover { border-color: color-mix(in srgb, var(--accent-cool) 55%, var(--hairline)); background: var(--bg-card-2); }
.wg-estate__name {
  display: block; font-family: var(--ff-display); font-weight: 600; font-size: 0.98rem;
  color: var(--text); letter-spacing: -0.01em; margin-bottom: 4px;
}
.wg-estate__list a:hover .wg-estate__name { color: var(--accent-cool); }
.wg-estate__desc { display: block; font-size: 0.83rem; color: var(--text-mute); line-height: 1.4; }
@media (max-width: 860px) { .wg-estate__list { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px) { .wg-estate__list { grid-template-columns: 1fr; } }