/* Oviti site tokens */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@500&display=swap");
/* Syne — display/headline face. Loaded from Google Fonts.
   SUBSTITUTION NOTE: no brand display font file was supplied. Syne was
   chosen as the futuristic display face; swap the @import for a
   self-hosted @font-face block when licensed files exist.
   Inter and Newsreader come from the Oviti Liquid Glass system and are
   self-hosted there; this system inherits them by name. */
:root {
  /* ---- brand core ---- */
  --o3-indigo: #5B3FE8;        /* primary — brand at full strength */
  --o3-indigo-deep: #4B2FD6;   /* the indigo ground */
  --o3-violet: #7C5CFF;
  --o3-cyan: #67E8F9;          /* the glow accent — rules, ticks, numerals */

  /* ---- grounds (max three per deliverable) ---- */
  --o3-ground-ink: #070B16;        /* near-black navy */
  --o3-ground-ink-deep: #04060E;   /* page surround behind a stage */
  --o3-ground-periwinkle: #E7E4FB; /* pale lavender, the light separator */
  --o3-ground-pale: #F4F5FA;       /* light content ground */
  --o3-ground-white: #FFFFFF;      /* plates on light grounds */

  /* ---- ink on dark ---- */
  --o3-on-dark-1: #FFFFFF;
  --o3-on-dark-2: rgba(255, 255, 255, 0.82);
  --o3-on-dark-3: rgba(255, 255, 255, 0.72);
  --o3-on-dark-4: rgba(255, 255, 255, 0.55);

  /* ---- ink on light ---- */
  --o3-on-light-1: #0A0E1C;
  --o3-on-light-2: #3A4360;
  --o3-on-light-3: #6B7490;

  /* ---- ink on indigo ---- */
  --o3-on-indigo-1: #FFFFFF;
  --o3-on-indigo-2: rgba(255, 255, 255, 0.88);
  --o3-on-indigo-accent: #67E8F9;

  /* ---- status ---- */
  --o3-green: #34D399;
  --o3-amber: #FBBF24;
  --o3-red: #F87171;

  /* ---- lines ---- */
  --o3-hairline-dark: rgba(255, 255, 255, 0.18);
  --o3-hairline-light: rgba(10, 14, 28, 0.16);
  --o3-plate-border-light: rgba(10, 14, 28, 0.08);
  --o3-seam: #67E8F9;

  /* ---- patterns (the high-tech layer) ---- */
  --o3-dots-on-dark: radial-gradient(rgba(255,255,255,0.10) 1.5px, transparent 1.6px);
  --o3-dots-on-indigo: radial-gradient(rgba(255,255,255,0.16) 1.5px, transparent 1.6px);
  --o3-dots-on-light: radial-gradient(rgba(10,14,28,0.13) 1.5px, transparent 1.6px);
  --o3-dots-size: 30px 30px;
  --o3-dash-on-dark: repeating-linear-gradient(90deg, rgba(255,255,255,0.7) 0 9px, rgba(255,255,255,0) 9px 18px);
  --o3-dash-on-light: repeating-linear-gradient(90deg, rgba(10,14,28,0.34) 0 9px, rgba(10,14,28,0) 9px 18px);
  --o3-ticks-cyan: repeating-linear-gradient(90deg, rgba(103,232,249,0.55) 0 1px, transparent 1px 9px);
  --o3-ticks-indigo: repeating-linear-gradient(90deg, rgba(91,63,232,0.5) 0 1px, transparent 1px 9px);
  --o3-ticks-white: repeating-linear-gradient(90deg, rgba(255,255,255,0.45) 0 1px, transparent 1px 12px);

  /* ---- glows ---- */
  --o3-form-shadow: drop-shadow(0 30px 70px rgba(91, 63, 232, 0.45));
  --o3-form-shadow-light: drop-shadow(0 20px 60px rgba(91, 63, 232, 0.28));
  --o3-plate-shadow-light: 0 4px 20px rgba(10, 14, 28, 0.06);
}
:root {
  /* ---- families ---- */
  --o3-display: "Syne", "Outfit", "Inter", system-ui, sans-serif;  /* titles + headlines + numerals */
  --o3-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --o3-wordmark: "Outfit", "Inter", system-ui, sans-serif;          /* OVITI lockup only */

  /* ---- 1920x1080 slide scale (the authoring size) ---- */
  --o3-t-display: 82px;
  --o3-t-title: 64px;
  --o3-t-sub: 40px;
  --o3-t-body: 32px;
  --o3-t-small: 27px;
  --o3-t-label: 25px;   /* never below 25px on a slide */
  --o3-t-numeral: 152px;
  --o3-t-figure: 200px; /* the single big number */

  /* ---- weights ---- */
  --o3-w-display: 500;
  --o3-w-label: 600;
  --o3-w-numeral: 700;
  --o3-w-lede: 300;

  /* ---- tracking ---- */
  --o3-track-display: -0.02em;
  --o3-track-numeral: -0.04em;
  --o3-track-label: 0.16em;
  --o3-track-wordmark: 0.42em;

  /* ---- leading ---- */
  --o3-lh-display: 1.06;
  --o3-lh-title: 1.1;
  --o3-lh-lede: 1.35;
  --o3-lh-body: 1.45;
}
:root {
  /* ---- slide frame (1920x1080) ---- */
  --o3-pad-x: 96px;
  --o3-pad-t: 88px;
  --o3-pad-b: 80px;
  --o3-pad-inner: 76px;   /* the gutter between a type half and an image half */

  /* ---- rhythm ---- */
  --o3-gap-title: 34px;
  --o3-gap-item: 22px;
  --o3-gap-card: 24px;

  /* ---- split frame ---- */
  --o3-split-type: 54%;   /* type half on cover and close */
  --o3-split-sep: 52%;    /* type half on separators */
  --o3-seam-width: 3px;

  /* ---- plates ---- */
  --o3-radius-card: 16px;
  --o3-radius-plate: 12px;
  --o3-radius-pill: 999px;
  --o3-plate-pad: 26px 30px;

  /* ---- accent rule + tick strip ---- */
  --o3-rule-w: 44px;
  --o3-rule-h: 2px;
  --o3-ticks-w: 96px;
  --o3-ticks-h: 11px;
}
:root {
  /* ---- the growth loop: every form animation is seed -> form in 5s ---- */
  --o3-grow-duration: 5s;
  --o3-grow-ease: cubic-bezier(0.22, 1, 0.36, 1);   /* easeOutQuint — the settle */
  --o3-bloom-ease: cubic-bezier(0.34, 1.56, 0.64, 1); /* easeOutBack — the pop */
  --o3-drift-ease: cubic-bezier(0.37, 0, 0.63, 1);  /* easeInOutSine — the hold */

  /* ---- UI motion ---- */
  --o3-t-fast: 0.14s;
  --o3-t-base: 0.22s;
  --o3-t-slow: 0.6s;
}

@keyframes o3-seed-bloom {
  from { opacity: 0; transform: scale(0.08) translateY(26px) rotate(-7deg); }
  to   { opacity: 1; transform: scale(1) translateY(0) rotate(0deg); }
}

@keyframes o3-ring-pulse {
  from { opacity: 0.7; transform: scale(0.12); }
  to   { opacity: 0; transform: scale(2.2); }
}

@media (prefers-reduced-motion: reduce) {
  :root { --o3-grow-duration: 0.01s; }
}