/* ============================================================
   HelloWorld.ie — Brand foundation (brand.css)
   Single source of truth for colour + type, loaded FIRST on
   every surface (public site + admin + portal + generated pages).

   Layers:
     1. Fixed brand palette  — hues that never change with theme
     2. Role tokens          — flip between light (default) + dark
     3. Legacy bridge        — aliases the old hw.css / SPA token
                               names onto the new system so existing
                               markup reskins with no edits.

   Light is the DEFAULT/preferred surface; dark is a first-class peer.
   ============================================================ */

/* ---- 0. Self-hosted webfont (GDPR: no request to Google) ----
   Plus Jakarta Sans variable font, weights 200–800, served from
   /fonts/. Keep unicode-range splits so browsers download only
   the subset a page actually uses. */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/fonts/plus-jakarta-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/fonts/plus-jakarta-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* ---- 1. Fixed brand palette (never flips) ---- */
  --violet:  #6d44e0;   /* Signal Violet — primary accent (AA on white ~5.9:1) */
  --lilac:   #a98bff;   /* Bright Violet — accent on dark grounds */
  --magenta: #4a2bb0;   /* Deep Violet — secondary, sparing (AAA) */

  --c-ink:   #262430;   /* brand ink — near-black */
  --void:    #15121d;   /* deepest dark surface */
  --void-2:  #1b1726;   /* raised dark surface */
  --paper:   #f7f6fb;   /* off-white ground */
  --paper-2: #efedf5;   /* faint panel on light */
  --mist:    #e3e0ec;   /* hairline / light gray */

  /* functional (kept distinct from brand violet) */
  --green:  #16a34a;  --green-d: #15803d;
  --amber:  #f59e0b;
  --pink:   #ff5d8f;
  --no:     #a23b3b;  /* "don't" red */
  --good-bg: color-mix(in srgb, var(--green) 12%, transparent);
  --bad-bg:  color-mix(in srgb, var(--no) 12%, transparent);

  /* gradients */
  --grad:      linear-gradient(120deg, var(--violet), var(--magenta));
  --grad-soft: linear-gradient(120deg, color-mix(in srgb,var(--violet) 12%,transparent), color-mix(in srgb,var(--magenta) 12%,transparent));

  /* fixed dark-context helpers (for always-dark sections) */
  --dim-dark:  oklch(0.975 0.004 288 / 0.62);
  --line-dark: oklch(1 0 0 / 0.12);

  /* type */
  --font-sans: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Plus Jakarta Sans", system-ui, sans-serif;   /* NO real monospace — brand rule */

  /* metrics */
  --r: 16px;
  --maxw: 1180px;
  --pad: clamp(24px, 6vw, 120px);
  --shadow:    0 6px 24px oklch(0.235 0.022 288 / 0.08);
  --shadow-lg: 0 30px 80px -40px oklch(0.52 0.21 286 / 0.40);

  /* ---- 2. Role tokens — LIGHT defaults ---- */
  --surface:   var(--paper);
  --surface-2: var(--paper-2);
  --card:      #ffffff;
  --text:      var(--c-ink);
  --text-2:    oklch(0.235 0.022 288 / 0.80);
  --text-dim:  oklch(0.235 0.022 288 / 0.60);
  --line-role: oklch(0.235 0.022 288 / 0.12);
  --accent:    var(--violet);
}

/* ---- 2b. Role tokens — DARK overrides ---- */
:root[data-theme="dark"] {
  --surface:   var(--void);
  --surface-2: var(--void-2);
  --card:      var(--void-2);
  --text:      var(--paper);
  --text-2:    oklch(0.975 0.004 288 / 0.82);
  --text-dim:  oklch(0.975 0.004 288 / 0.62);
  --line-role: oklch(1 0 0 / 0.12);
  --accent:    var(--lilac);
}

/* ---- 3. Legacy bridge ----
   Old hw.css + SPA token names → new system. Lets every existing
   `var(--blue)` / `var(--ink)` / `var(--gold)` reskin automatically. */
:root {
  /* surfaces & text */
  --bg:     var(--surface);
  --soft:   var(--surface-2);
  --soft-2: var(--surface-2);
  --ink:    var(--text);
  --ink-2:  var(--text-2);
  --ink-3:  var(--text-dim);
  --line:       var(--line-role);
  --line-light: var(--line-role);
  --dim-light:  var(--text-dim);
  /* accents — old blue/teal/secondary-violet all collapse to the brand */
  --blue:   var(--accent);
  --blue-d: var(--magenta);
  --teal:   var(--lilac);
  --gold:   var(--accent);   /* admin/portal primary token */
  /* type alias */
  --font: var(--font-sans);
  --head: var(--font-sans);
  --mono: var(--font-sans);  /* NO monospace */
  --fb:   var(--font-sans);
  --fh:   var(--font-sans);
  --fmono: var(--font-sans);
}

/* ============================================================
   Base
   ============================================================ */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  background: var(--surface);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.55;
  letter-spacing: -0.01em;
  transition: background-color 0.25s ease, color 0.25s ease;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }

h1, h2, h3 { font-weight: 700; line-height: 1.06; letter-spacing: -0.02em; text-wrap: balance; }

/* accessibility: visible keyboard focus + skip link */
a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible,
[tabindex]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
summary:focus:not(:focus-visible) { outline: none; }
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 1000; background: var(--violet); color: #fff; font-weight: 600; padding: 10px 18px; border-radius: 0 0 12px 0; box-shadow: var(--shadow); }
.skip-link:focus, .skip-link:focus-visible { left: 0; outline: 2px solid #fff; outline-offset: -4px; }

/* ============================================================
   Logo — the bot mark + wordmark lockup
   ============================================================ */
[data-orbit] { display: inline-flex; line-height: 0; vertical-align: middle; }
[data-orbit] svg { display: block; }
.lockup { display: flex; align-items: center; gap: 11px; }
.lockup.stacked { flex-direction: column; gap: 18px; }
.wordmark { font-weight: 700; letter-spacing: -0.03em; line-height: 1; white-space: nowrap; }
.wordmark .ie, .brand .ie { color: var(--accent); }

/* ============================================================
   Eyebrow / tracked label (replaces monospace labels)
   ============================================================ */
.eyebrow-a, .app-label-a {
  font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  font-weight: 700; color: var(--accent); display: inline-flex; align-items: center; gap: 10px;
}
.eyebrow-a::before { content: ""; width: 22px; height: 2px; background: var(--accent); }

/* ============================================================
   Theme toggle button (wired by /js/theme.js)
   ============================================================ */
.theme-toggle {
  width: 38px; height: 38px; border-radius: 999px;
  border: 1px solid var(--line-role); background: transparent; color: var(--text);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  flex-shrink: 0; transition: border-color 0.18s, background 0.18s, transform 0.12s;
}
.theme-toggle:hover { border-color: var(--accent); transform: translateY(-1px); }
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .i-sun { display: none; }
.theme-toggle .i-moon { display: block; }
:root[data-theme="dark"] .theme-toggle .i-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .i-moon { display: none; }

@media (prefers-reduced-motion: reduce) {
  body, .theme-toggle { transition: none; }
}