/* =====================================================================
   OjarisLabs — Design Tokens
   Single source of truth for the whole visual system.
   ===================================================================== */

:root {
  /* ---- Brand palette ---- */
  --oj-orange: #FF8A00;
  --oj-pink: #F72585;
  --oj-purple: #8B3DFF;
  --oj-blue: #168BFF;
  --oj-cyan: #00C9D8;

  /* ---- Core dark backgrounds ---- */
  --bg-core: #030817;
  --bg-dark-1: #050A18;
  --bg-dark-2: #071126;
  --bg-dark-3: #0A1224;

  /* ---- Light backgrounds ---- */
  --bg-white: #FFFFFF;
  --bg-light-1: #F7F8FC;
  --bg-light-2: #FAFAFC;

  /* ---- Text ---- */
  --text-strong: #0B1020;      /* near-black on light */
  --text-body: #3B4256;        /* body on light */
  --text-muted: #6A7183;       /* muted on light */
  --text-on-dark: #EEF2FB;     /* headings on dark */
  --text-on-dark-soft: #A7B0C6; /* body on dark */
  --text-on-dark-muted: #7A8399;

  /* ---- Surfaces / borders ---- */
  --surface-card: #FFFFFF;
  --surface-card-dark: #0C1428;
  --border-light: #E7EAF3;
  --border-dark: rgba(255, 255, 255, 0.08);
  --border-dark-strong: rgba(255, 255, 255, 0.14);

  /* ---- Signature gradient ---- */
  --grad-primary: linear-gradient(90deg, #FF8A00 0%, #F72585 35%, #8B3DFF 68%, #168BFF 100%);
  --grad-primary-135: linear-gradient(135deg, #FF8A00 0%, #F72585 35%, #8B3DFF 68%, #168BFF 100%);
  --grad-banner: linear-gradient(90deg, #FF8A00 0%, #F72585 42%, #8B3DFF 74%, #168BFF 100%);
  --grad-soft: linear-gradient(135deg, rgba(255, 138, 0, 0.12), rgba(139, 61, 255, 0.12));

  /* ---- Typography ---- */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Poppins", var(--font-sans);

  --fs-hero: clamp(2.4rem, 1.4rem + 3.6vw, 4rem);
  --fs-h1: clamp(2.1rem, 1.4rem + 2.6vw, 3.25rem);
  --fs-h2: clamp(1.75rem, 1.2rem + 1.9vw, 2.6rem);
  --fs-h3: clamp(1.25rem, 1.05rem + 0.7vw, 1.55rem);
  --fs-h4: clamp(1.05rem, 0.98rem + 0.35vw, 1.2rem);
  --fs-lead: clamp(1.02rem, 0.96rem + 0.35vw, 1.2rem);
  --fs-body: 1rem;
  --fs-sm: 0.9rem;
  --fs-xs: 0.8rem;
  --fs-eyebrow: 0.78rem;

  --lh-tight: 1.1;
  --lh-snug: 1.28;
  --lh-body: 1.65;

  /* ---- Layout ---- */
  --container: 1200px;
  --container-wide: 1320px;
  --container-narrow: 960px;
  --gutter: clamp(1.15rem, 0.6rem + 2vw, 2.5rem);
  --header-h: 76px;

  /* ---- Spacing scale ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --section-y: clamp(3.5rem, 2rem + 5vw, 6.5rem);

  /* ---- Radii ---- */
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 22px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* ---- Shadows ---- */
  --shadow-sm: 0 1px 2px rgba(11, 16, 32, 0.06);
  --shadow-card: 0 10px 30px -12px rgba(11, 16, 32, 0.16);
  --shadow-card-hover: 0 22px 48px -18px rgba(11, 16, 32, 0.28);
  --shadow-float: 0 30px 70px -30px rgba(11, 16, 32, 0.45);
  --shadow-dark: 0 24px 60px -24px rgba(0, 0, 0, 0.6);
  --glow-brand: 0 12px 40px -12px rgba(247, 37, 133, 0.45);

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 160ms;
  --dur: 260ms;
  --dur-slow: 520ms;

  --z-header: 100;
  --z-menu: 200;
  --z-toast: 300;
}