/* obviEnce design tokens — the ONLY file allowed to hold raw colours (run ../ui design/check.sh on concept/).
   Brand colours are the current site's, sampled from obvience.com on 2026-11-01:
   ground #010700, orange #FF7D23, cyan #00ADEF, the cream band #FFF9C4, the wordmark's orange→cream gradient
   and the hero's cyan→mint gradient. Two gradients, two forces: warm = business, cool = AI. */

:root {
  /* brand */
  --orange: #FF7D23;  --orange-2: #FF8B35;  --peach: #FFB27A;  --cream: #FFF9C4;  --cream-2: #FFE6A6;
  --cyan: #00ADEF;    --cyan-2: #3CC4F5;    --mint: #C6EECF;
  --coral: #FF5E4D;   /* negatives in charts only — never decoration */

  /* ground and surfaces (green-black, as today: not navy, not pure black) */
  --ground: #010700;  --ground-2: #050C04;  --ground-3: #0A1209;
  --glass: linear-gradient(160deg, rgba(240,240,240,.075), rgba(240,240,240,.018));
  --glass-solid: #0B130A;
  --line: rgba(240,240,240,.09);  --line-2: rgba(240,240,240,.16);  --grid: rgba(240,240,240,.06);

  /* ink */
  --ink: #F0F0F0;  --ink-2: #D7DCD6;  --muted: #9CA79B;  --dim: #66725F;
  --ink-on-orange: #1A0B00;  --ink-on-cream: #1D1A08;  --ink-on-light: #2A2611;  --muted-on-cream: #6B6440;
  --white: #FFFFFF;  --black: #000000;

  /* gradients */
  --warm: linear-gradient(100deg, var(--orange) 0%, var(--orange-2) 35%, var(--cream-2) 100%);
  --cool: linear-gradient(100deg, var(--cyan) 0%, var(--cyan-2) 40%, var(--mint) 100%);
  --spark: linear-gradient(100deg, var(--orange) 0%, var(--cream-2) 50%, var(--cyan) 100%);
  --btn: linear-gradient(135deg, var(--orange-2), var(--orange) 55%, color-mix(in srgb, var(--orange) 78%, var(--black)));

  /* effects */
  --glow: 1;
  --shadow: 0 30px 80px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.35);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --halo-orange: 0 10px 40px -8px color-mix(in srgb, var(--orange) 65%, transparent);
  --halo-cyan: 0 10px 40px -8px color-mix(in srgb, var(--cyan) 65%, transparent);
  --grain-opacity: .07;

  /* the section accent: a block sets --a and everything inside follows (from PACE) */
  --a: var(--orange);

  /* type */
  --display: "Sora", "Segoe UI", system-ui, -apple-system, sans-serif;
  --sans: "Inter", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --fs-micro: 11.5px; --ls-micro: .16em;
  --fs-sm: 14px; --fs-body: 16.5px; --fs-lead: clamp(17px, 1.35vw, 20px);
  --fs-h3: 21px; --fs-h2: clamp(32px, 4.2vw, 54px); --fs-d1: clamp(44px, 6.6vw, 92px); --fs-mega: clamp(56px, 11vw, 168px);

  /* shape */
  --r-sm: 8px; --r-btn: 999px; --r-card: 20px; --r-panel: 26px; --r-pill: 999px;
  --wrap: 1240px;

  /* motion: one curve (PACE) */
  --ease: cubic-bezier(.2,.8,.2,1); --ease-in-out: cubic-bezier(.65,0,.35,1);
  --t-fast: .18s; --t-med: .3s; --t-slow: .6s; --t-reveal: .9s;
}

/* tints follow the nearest --a (declared per element so they don't freeze at :root) */
*, *::before, *::after { --a-soft: color-mix(in srgb, var(--a) 14%, transparent); --a-line: color-mix(in srgb, var(--a) 45%, transparent); }

@keyframes rise    { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes wordUp  { from { opacity: 0; transform: translateY(.55em) rotate(2deg); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes grow    { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes growX   { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes drawin  { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes popin   { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
@keyframes flash   { 0% { background: color-mix(in srgb, var(--a) 32%, transparent); } 100% { background: transparent; } }
@keyframes pulse   { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--a) 55%, transparent); } 60% { box-shadow: 0 0 0 9px transparent; } }
@keyframes sheen   { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@keyframes drift1  { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(6%, -4%) scale(1.08); } }
@keyframes drift2  { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-5%, 5%) scale(1.1); } }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes caret   { 50% { opacity: 0; } }
@keyframes spark   { 0%, 100% { opacity: .55; transform: scale(.9); } 50% { opacity: 1; transform: scale(1.15); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}