/* ==========================================================================
   iWEX Website — Design System tokens & base
   Authored from DESIGN.md. OKLCH throughout. Self-hosted variable fonts.
   Loaded on every web page via hooks.py web_include_css.
   ========================================================================== */

/* ----- Fonts (self-hosted, no runtime CDN) -------------------------------- */
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/assets/iwex_website/fonts/bricolage-grotesque.woff2") format("woff2");
  font-weight: 300 800;
  font-stretch: 75% 100%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("/assets/iwex_website/fonts/hanken-grotesk.woff2") format("woff2");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ----- Blue ramp (brand anchor: --blue-800 ≈ #1A3C6E) ------------------ */
  --blue-50:  oklch(0.972 0.012 255);
  --blue-100: oklch(0.940 0.022 256);
  --blue-200: oklch(0.885 0.038 257);
  --blue-300: oklch(0.800 0.058 258);
  --blue-400: oklch(0.680 0.082 259);
  --blue-500: oklch(0.560 0.098 260);
  --blue-600: oklch(0.470 0.098 261);
  --blue-700: oklch(0.405 0.092 262);
  --blue-800: oklch(0.350 0.088 262); /* #1A3C6E */
  --blue-900: oklch(0.280 0.070 263);
  --blue-950: oklch(0.205 0.048 264);

  /* ----- Orange ramp (brand anchor: --orange-500 ≈ #F97316) -------------- */
  --orange-50:  oklch(0.970 0.020 60);
  --orange-100: oklch(0.940 0.045 58);
  --orange-200: oklch(0.890 0.082 54);
  --orange-300: oklch(0.830 0.122 50);
  --orange-400: oklch(0.765 0.162 46);
  --orange-500: oklch(0.705 0.191 41.5); /* #F97316 */
  --orange-600: oklch(0.640 0.188 38);
  --orange-700: oklch(0.555 0.168 35);
  --orange-800: oklch(0.470 0.140 34);
  --orange-900: oklch(0.400 0.112 35);

  /* ----- Neutral ramp (tinted toward blue hue, very low chroma) ---------- */
  --n-50:  oklch(0.988 0.004 255);
  --n-100: oklch(0.968 0.006 255);
  --n-200: oklch(0.928 0.008 256);
  --n-300: oklch(0.878 0.010 257);
  --n-400: oklch(0.760 0.012 258);
  --n-500: oklch(0.620 0.014 259);
  --n-600: oklch(0.500 0.016 260);
  --n-700: oklch(0.400 0.018 261);
  --n-800: oklch(0.300 0.020 262);
  --n-900: oklch(0.240 0.020 262);
  --n-950: oklch(0.180 0.022 263);

  /* ----- Semantic (light) ----------------------------------------------- */
  --bg:          oklch(0.990 0.004 255);
  --surface:     oklch(1 0 0);
  --surface-2:   oklch(0.968 0.006 255);
  --surface-inset: oklch(0.948 0.008 256);
  --ink:         oklch(0.240 0.020 262);
  --ink-muted:   oklch(0.450 0.020 260);
  --ink-faint:   oklch(0.560 0.016 259);
  --border:      oklch(0.900 0.008 256);
  --border-strong: oklch(0.840 0.012 257);

  --brand:        var(--blue-800);
  --brand-strong: var(--blue-900);
  --brand-tint:   var(--blue-50);

  --accent:        var(--orange-500);
  --accent-strong: var(--orange-600);
  --accent-ink:    var(--orange-700); /* orange used as TEXT on light bg */
  --on-accent:     oklch(0.205 0.030 262); /* deep-navy ink on orange fills — AA ~4.6:1 */

  --ring: var(--accent);

  /* ----- Type ----------------------------------------------------------- */
  --font-display: "Bricolage Grotesque", "Hanken Grotesk", system-ui, sans-serif;
  --font-body: "Hanken Grotesk", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  --step--1: 0.9rem;
  --step-0:  1.0625rem;
  --step-1:  1.27rem;
  --step-2:  1.52rem;
  --step-3:  1.95rem;
  --step-4:  clamp(2.2rem, 1.6rem + 2.6vw, 3.15rem);
  --step-5:  clamp(2.7rem, 1.7rem + 4.4vw, 5rem);

  /* ----- Space / layout ------------------------------------------------- */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;  --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-5: 1.25rem;  --sp-6: 1.5rem;  --sp-8: 2rem;    --sp-10: 2.5rem;
  --sp-12: 3rem;    --sp-16: 4rem;   --sp-20: 5rem;   --sp-24: 6rem;  --sp-32: 8rem;
  --section-y: clamp(3.5rem, 2rem + 6vw, 8rem);
  --measure: 72rem;
  --measure-text: 42rem;
  --gutter: clamp(1.25rem, 0.5rem + 3vw, 3rem);

  --r-sm: 0.375rem; --r-md: 0.625rem; --r-lg: 1rem; --r-xl: 1.5rem; --r-full: 999px;

  --shadow-sm: 0 1px 2px oklch(0.35 0.088 262 / 0.06), 0 1px 3px oklch(0.35 0.088 262 / 0.05);
  --shadow-md: 0 4px 12px oklch(0.35 0.088 262 / 0.08), 0 2px 4px oklch(0.35 0.088 262 / 0.05);
  --shadow-lg: 0 18px 40px oklch(0.28 0.070 263 / 0.14), 0 6px 14px oklch(0.28 0.070 263 / 0.08);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 160ms;

  color-scheme: light dark;
}

/* ----- Dark theme (blue-drenched, not gray) ----------------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:          oklch(0.200 0.030 263);
    --surface:     oklch(0.245 0.035 263);
    --surface-2:   oklch(0.285 0.036 263);
    --surface-inset: oklch(0.230 0.033 263);
    --ink:         oklch(0.960 0.010 255);
    --ink-muted:   oklch(0.740 0.020 258);
    --ink-faint:   oklch(0.640 0.020 258);
    --border:      oklch(0.340 0.030 263);
    --border-strong: oklch(0.420 0.034 263);
    --brand:       var(--blue-300);
    --brand-strong: var(--blue-200);
    --brand-tint:  oklch(0.285 0.040 263);
    --accent:      var(--orange-400);
    --accent-strong: var(--orange-500);
    --accent-ink:  var(--orange-300);
    --on-accent:   oklch(0.190 0.030 262);
    --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.4);
    --shadow-md: 0 4px 12px oklch(0 0 0 / 0.45);
    --shadow-lg: 0 18px 40px oklch(0 0 0 / 0.55);
  }
}
/* Explicit theme override wins in both directions */
:root[data-theme="dark"] {
  --bg: oklch(0.200 0.030 263); --surface: oklch(0.245 0.035 263);
  --surface-2: oklch(0.285 0.036 263); --surface-inset: oklch(0.230 0.033 263);
  --ink: oklch(0.960 0.010 255); --ink-muted: oklch(0.740 0.020 258); --ink-faint: oklch(0.640 0.020 258);
  --border: oklch(0.340 0.030 263); --border-strong: oklch(0.420 0.034 263);
  --brand: var(--blue-300); --brand-strong: var(--blue-200); --brand-tint: oklch(0.285 0.040 263);
  --accent: var(--orange-400); --accent-strong: var(--orange-500); --accent-ink: var(--orange-300);
  --on-accent: oklch(0.190 0.030 262);
  --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.4); --shadow-md: 0 4px 12px oklch(0 0 0 / 0.45);
  --shadow-lg: 0 18px 40px oklch(0 0 0 / 0.55);
}

/* ==========================================================================
   Base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body.iwex {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-optical-sizing: auto;
}

.iwex h1, .iwex h2, .iwex h3, .iwex h4 {
  font-family: var(--font-display);
  font-weight: 640;
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 0.5em;
  text-wrap: balance;
}
.iwex h1 { font-size: var(--step-5); font-weight: 700; letter-spacing: -0.025em; }
.iwex h2 { font-size: var(--step-4); letter-spacing: -0.02em; }
.iwex h3 { font-size: var(--step-2); }
.iwex h4 { font-size: var(--step-1); }
.iwex p { margin: 0 0 1em; max-width: var(--measure-text); text-wrap: pretty; }
.iwex a { color: var(--brand); text-underline-offset: 0.18em; text-decoration-color: color-mix(in oklch, var(--brand) 35%, transparent); }
.iwex a:hover { text-decoration-color: currentColor; }
.iwex img { max-width: 100%; height: auto; display: block; }
.iwex strong { font-weight: 640; }
.iwex ::selection { background: color-mix(in oklch, var(--accent) 28%, transparent); color: var(--ink); }
.iwex :focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: var(--r-sm); }

.tabular { font-variant-numeric: tabular-nums; }

/* ----- Layout helpers -------------------------------------------------- */
.container { width: 100%; max-width: var(--measure); margin-inline: auto; padding-inline: var(--gutter); }
.container--text { max-width: 52rem; }
.section { padding-block: var(--section-y); }
.stack > * + * { margin-top: var(--flow, 1rem); }

.kicker {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-body); font-size: var(--step--1); font-weight: 600;
  letter-spacing: 0.02em; color: var(--accent-ink);
}
.kicker::before { content: ""; width: 1.5rem; height: 2px; background: var(--accent); border-radius: 2px; }

.eyebrow { font-size: var(--step--1); font-weight: 600; color: var(--ink-muted); }
.lead { font-size: var(--step-1); color: var(--ink-muted); line-height: 1.55; }

/* ----- Buttons --------------------------------------------------------- */
.btn {
  --_bg: var(--surface); --_fg: var(--ink); --_bd: var(--border-strong);
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font-family: var(--font-body); font-size: var(--step-0); font-weight: 600;
  line-height: 1; padding: 0.85em 1.35em; border-radius: var(--r-md);
  background: var(--_bg); color: var(--_fg); border: 1.5px solid var(--_bd);
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease),
              border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn--primary {
  --_bg: var(--accent); --_fg: var(--on-accent); --_bd: var(--accent);
  box-shadow: 0 6px 18px oklch(0.705 0.191 41.5 / 0.28);
}
.btn--primary:hover { --_bg: var(--orange-400); box-shadow: 0 10px 26px oklch(0.705 0.191 41.5 / 0.34); }
.btn--secondary { --_bg: transparent; --_fg: var(--brand); --_bd: color-mix(in oklch, var(--brand) 45%, transparent); }
.btn--secondary:hover { --_bd: var(--brand); --_bg: var(--brand-tint); }
.btn--ghost { --_bg: transparent; --_bd: transparent; --_fg: var(--ink); }
.btn--ghost:hover { --_bg: var(--surface-2); }
.btn--lg { font-size: var(--step-1); padding: 0.95em 1.6em; }
.btn--on-dark { --_fg: var(--n-50); --_bd: oklch(1 0 0 / 0.25); }
.btn--on-dark.btn--secondary:hover { --_bg: oklch(1 0 0 / 0.08); --_bd: oklch(1 0 0 / 0.5); }
/* The prose-link rule `.iwex a { color: var(--brand) }` outranks `.btn` (both
   0,1,x) and forces every <a class="btn"> to brand-blue — wrong ink on the
   orange primary (drops it below AA) and dark text on --on-dark button links.
   Restore each button link's own --_fg with a selector that outranks it. */
.iwex a.btn { color: var(--_fg); }
/* Frappe's website bundle ships `.btn:not(.btn-md):not(.btn-lg){padding:4px 8px}`
   (specificity 0,3,0) which clobbers the design-system padding above and crushes
   every button to ~30px tall (tight to tap on mobile). Re-assert at 0,4,0. */
.iwex .btn:not(.btn-md):not(.btn-lg) { padding: 0.85em 1.35em; line-height: 1; }
.iwex .btn--lg:not(.btn-md):not(.btn-lg) { padding: 0.95em 1.6em; }

/* ----- Stat ------------------------------------------------------------ */
.stat__value { font-family: var(--font-display); font-weight: 700; font-size: var(--step-3);
  line-height: 1; color: var(--accent-ink); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.stat__label { font-size: var(--step--1); color: var(--ink-muted); margin-top: 0.35rem; }

/* ----- Card ------------------------------------------------------------ */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm); }

/* ----- Skip link ------------------------------------------------------- */
/* Scoped under .iwex so `color` outranks the generic `.iwex a` rule — otherwise
   the focused skip link is brand ink on a brand background (invisible). */
.iwex .skip-link { position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--brand); color: var(--n-50); padding: 0.6rem 1rem; border-radius: 0 0 var(--r-md) 0; }
.iwex .skip-link:focus { left: 0; }

/* ----- Grid helpers ---------------------------------------------------- */
.grid { display: grid; gap: var(--sp-6); }
.auto-fit { display: grid; gap: var(--sp-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }

/* ----- Motion primitives (respect reduced-motion + no-JS) --------------
   Reveals only hide when JS is present (html.js). Without JS, or with
   reduced motion, all content is shown immediately. */
.js .reveal { opacity: 0; transform: translateY(14px); }
.js .reveal.is-in { opacity: 1; transform: none; transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; }
  .js .reveal.is-in { transition: none; }
  .btn:hover { transform: none; }
}