/* =========================================================
   Ondion — Colors & Type
   Single source of truth for the brand's foundation tokens.
   Pair with: README.md (rules), SKILL.md (usage protocol)
   ========================================================= */

/* Brand fonts — variable Montserrat (200–900). Italic file is shipped but
   the system bans italic, so it is not registered as @font-face here. */
@font-face {
  font-family: 'Montserrat';
  src: url('fonts/Montserrat-VariableFont_wght.ttf') format('truetype-variations'),
       url('fonts/Montserrat-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ── BRAND COLOURS ──────────────────────────────────────── */
  --violet:    #5c35cc;   /* primary anchor */
  --violet2:   #7048e8;   /* gradient mid (essential in iridescent) */
  --pink:      #e040fb;   /* chromatic accent */
  --rose:      #f48fb1;   /* soft warm highlight */
  --teal:      #0a7a8a;   /* bars + gradient endpoints ONLY — never as text */
  --teal-text: #0db8cc;   /* all small teal text in either mode */
  --orange:    #ff6b35;   /* energy · CTA */
  --orange2:   #ff9a5c;   /* soft warm · gradient use */
  --gold:      #c9a84c;   /* premium gradient endpoint */
  --silver:    #c0c8d8;   /* gradient start · cool sheen */

  /* ── DARK SURFACES ──────────────────────────────────────── */
  --bg:        #1a1a1f;   /* page background (same base as hero) */
  --card:      #22222a;   /* card surface — flat, no gradient */
  --border:    #2d2d38;   /* card borders · dividers */
  --hover:     #3a3a48;   /* elevated panels · hover states */
  --disabled:  #606068;   /* disabled — never text */

  /* ── DARK MODE TEXT HIERARCHY (5 levels) ────────────────── */
  /* Values authoritative per ondion-design-system-config.json */
  --white:     #ffffff;   /* L0 — hero headings */
  --c100:      #d4d4dc;   /* L1 — card headlines, stat numbers */
  --c200:      #a8a8b8;   /* L2 — body copy default */
  --c300:      #8e8ea8;   /* L3 — labels, section headers */
  --c400:      #6b6b80;   /* L4 — tags, metadata */
  --c500:      #4a4a5a;   /* L5 — STRUCTURAL ONLY, never text */

  /* ── LIGHT MODE — SAND SCALE ────────────────────────────── */
  --sand50:    #fdfcfb;
  --sand100:   #f6f5f3;   /* screen outputs (T3a/T3b) */
  --sand200:   #edeae5;   /* sidebar panels, recessed zones */
  --sand300:   #dbd7d0;   /* dividers, decorative numbers */
  --sand400:   #b8a882;   /* deep sand accent */
  --sand-card: #ffffff;   /* white card on sand */
  --print-bg:  #f9f8f7;   /* print outputs only (invoice, A4) */

  --light-heading:  #1a1a1f;
  --light-body:     #3a3a48;
  --light-label:    #6b6b80;
  --light-meta:     #9a8a78;

  /* ── FONTS ──────────────────────────────────────────────── */
  --display: 'Montserrat', sans-serif;   /* weight 200 logotype/hero */
  --ui:      'Montserrat', sans-serif;   /* weights 300–500 */

  /* ── CARDS / RADII / SPACING ────────────────────────────── */
  --r-hero:   20px;
  --r-small:  16px;
  --r-pill:   4px;
  --gap:      3px;        /* stacked cards */

  /* ── TYPE SCALE (px) ────────────────────────────────────── */
  --fs-label:    10px;    /* uppercase, tracked */
  --fs-meta:     11px;
  --fs-body-sm:  12px;
  --fs-body:     14px;
  --fs-body-lg:  16px;
  --fs-h3:       20px;
  --fs-h2:       28px;
  --fs-h1:       40px;
  --fs-display:  72px;    /* hero / cover */
  --fs-mega:     112px;   /* slide cover */

  /* ── TRACKING ───────────────────────────────────────────── */
  --tr-tight:  -0.02em;   /* logotype, mega display */
  --tr-normal: 0;
  --tr-label:  0.22em;    /* uppercase labels */
  --tr-label-tight: 0.18em;
  --tr-label-wide:  0.28em;
}

/* ── BASE TYPE STYLES ────────────────────────────────────── */
html, body {
  font-family: var(--ui);
  font-weight: 300;
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--c200);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-style: normal !important; /* italic forbidden, anywhere, ever */
}

/* No italic anywhere, ever — enforced */
em, i, cite, dfn, address, var { font-style: normal; }

/* Headlines — semantic mappings.
   In dark mode use silver-gold gradient text via .grad-silver-gold.
   In light mode keep solid #1a1a1f (no gradient). */
h1, .h1 {
  font-family: var(--display);
  font-weight: 200;
  font-size: var(--fs-h1);
  line-height: 1.1;
  letter-spacing: var(--tr-tight);
  color: var(--white);
  margin: 0;
}
h2, .h2 {
  font-family: var(--ui);
  font-weight: 300;
  font-size: var(--fs-h2);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--c100);
  margin: 0;
}
h3, .h3 {
  font-family: var(--ui);
  font-weight: 300;
  font-size: var(--fs-h3);
  line-height: 1.3;
  color: var(--c100);
  margin: 0;
}
p {
  font-weight: 300;
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--c200);
  margin: 0;
  text-wrap: pretty;
}

/* Logotype-specific — always weight 200, never italic */
.logotype {
  font-family: var(--display);
  font-weight: 200;
  font-style: normal;
  letter-spacing: var(--tr-tight);
}

/* Labels — uppercase, tracked, weight 400 */
.label, .eyebrow {
  font-family: var(--ui);
  font-weight: 400;
  font-size: var(--fs-label);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  line-height: 1.2;
}
.label--tight  { letter-spacing: var(--tr-label-tight); }
.label--wide   { letter-spacing: var(--tr-label-wide); }

/* Body variants */
.body-sm { font-size: var(--fs-body-sm); font-weight: 300; color: var(--c200); }
.meta    { font-size: var(--fs-meta);    font-weight: 400; color: var(--c400); }
.emphasis { font-weight: 500; color: var(--c100); }

/* Display — hero/cover */
.display {
  font-family: var(--display);
  font-weight: 200;
  font-size: var(--fs-display);
  line-height: 1;
  letter-spacing: var(--tr-tight);
}
.mega {
  font-family: var(--display);
  font-weight: 200;
  font-size: var(--fs-mega);
  line-height: 0.95;
  letter-spacing: var(--tr-tight);
}

/* ── GRADIENT TEXT (CSS bg-clip — NOT for the logotype) ──── */
.grad-silver-gold {
  background: linear-gradient(135deg,
    #c0c8d8 0%, #dde3ec 20%, #eaeef5 35%,
    #f5e8a0 60%, #e0c060 80%, #c9a84c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.grad-iridescent {
  background: linear-gradient(135deg,
    #5c35cc 0%, #7048e8 25%, #e040fb 55%, #0a7a8a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.grad-spectrum {
  background: linear-gradient(135deg,
    #c0c8d8 0%, #7048e8 20%, #e040fb 44%, #ff6b35 68%, #c9a84c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ── 1px GRADIENT BARS ───────────────────────────────────── */
.bar { height: 1px; border-radius: 2px; }
.bar-calm       { background: linear-gradient(90deg, #c0c8d8, #f0d080, #c9a84c); }
.bar-activating { background: linear-gradient(90deg, #5c35cc, #e040fb, #0a7a8a); }
.bar-fade       { background: linear-gradient(90deg, #5c35cc, transparent); }

/* ── PILL LABELS ─────────────────────────────────────────── */
.pill {
  display: inline-block;
  font-family: var(--ui);
  font-weight: 400;
  font-size: var(--fs-label);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--r-pill);
  padding: 2px 8px;
  color: var(--c300);
}
.pill-teal {
  background: rgba(13,184,204,0.08);
  border: 1px solid rgba(13,184,204,0.18);
  color: var(--teal-text);
}

/* ── CARDS ───────────────────────────────────────────────── */
.card-dark {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-small);
  transition: background 240ms ease, border-color 240ms ease, transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}
.card-dark--hero { border-radius: var(--r-hero); }

.card-light {
  background: var(--sand-card);
  border: none;
  border-radius: var(--r-small);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}
.card-light--hero { border-radius: var(--r-hero); }
@media print {
  .card-light, .card-light--hero { box-shadow: none; }
}

/* ── PAGE BACKGROUND (dark mode) ─────────────────────────
   Authoritative per ondion-design-system-config.json:
   ellipse 45% 35% at 100% 100%, 5 stops, violet endpoint never >~15% sat. */
.bg-violet-depth {
  background:
    radial-gradient(ellipse 45% 35% at 100% 100%,
      #221535 0%, #1e1230 12%, #1b1028 24%, #1a1122 38%, #1a1a1f 52%);
  background-attachment: fixed;
}

/* Grain overlay — pair with .bg-violet-depth */
.grain::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-size: 256px 256px;
}
.grain > * { position: relative; z-index: 1; }

/* ── GLOWS — multi-stop rgba (NEVER filter: blur, NEVER oklch) ── */
.glow-violet {
  position: absolute;
  pointer-events: none;
  background: radial-gradient(
    rgba(92,53,204,1.0)  0%,
    rgba(82,46,190,0.75) 18%,
    rgba(65,35,160,0.45) 38%,
    rgba(45,25,110,0.18) 58%,
    rgba(28,18,60,0.05)  72%,
    transparent          82%);
  opacity: 0.14;
}
.glow-pink {
  position: absolute;
  pointer-events: none;
  background: radial-gradient(
    rgba(224,64,251,1.0)  0%,
    rgba(200,55,225,0.75) 18%,
    rgba(160,44,190,0.45) 38%,
    rgba(110,30,130,0.18) 58%,
    rgba(60,15,70,0.05)   72%,
    transparent           82%);
  opacity: 0.10;
}

/* ── LIGHT MODE BASE ────────────────────────────────────── */
.light-mode {
  background: var(--sand100);
  color: var(--light-body);
}
.light-mode h1, .light-mode h2, .light-mode h3,
.light-mode .h1, .light-mode .h2, .light-mode .h3 {
  color: var(--light-heading);
}
.light-mode p, .light-mode .body-sm { color: var(--light-body); }
.light-mode .label, .light-mode .eyebrow { color: var(--violet); }
.light-mode .meta { color: var(--light-meta); }
.light-mode--print { background: var(--print-bg); }

/* ── ANIMATIONS ─────────────────────────────────────────────
   Desktop-only — components conditionally apply classes
   based on isMobile check in JSX.                          */

/* Hero — CSS keyframe (above-fold, plays on mount) */
@keyframes fadeUpIn {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: none; }
}
.fade-up    { animation: fadeUpIn 1.1s ease-out both; }
.fade-up-d1 { animation-delay: 0.32s; }
.fade-up-d2 { animation-delay: 0.64s; }

/* Scroll-reveal — .visible added by IntersectionObserver */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 1.0s ease-out, transform 1.0s ease-out;
}
.reveal.visible { opacity: 1; transform: none; }

/* Staggered children */
.reveal-stagger > .reveal-item {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.85s ease-out, transform 0.85s ease-out;
}
.reveal-stagger.visible > .reveal-item            { opacity: 1; transform: none; }
.reveal-stagger.visible > .reveal-item:nth-child(1) { transition-delay: 0.00s; }
.reveal-stagger.visible > .reveal-item:nth-child(2) { transition-delay: 0.15s; }
.reveal-stagger.visible > .reveal-item:nth-child(3) { transition-delay: 0.30s; }
.reveal-stagger.visible > .reveal-item:nth-child(4) { transition-delay: 0.45s; }
.reveal-stagger.visible > .reveal-item:nth-child(5) { transition-delay: 0.60s; }
.reveal-stagger.visible > .reveal-item:nth-child(6) { transition-delay: 0.75s; }
.reveal-stagger.visible > .reveal-item:nth-child(7) { transition-delay: 0.90s; }