/* ================================================================
   LUCID POINT MEDIA — Design Tokens
   The single source of truth. Every visual value originates here.
   ================================================================ */

:root {
  /* --- Colour · foundation --- */
  --ink: #10131E;
  --ink-raise: rgba(25, 28, 44, 0.92);
  --paper: #EDEFFA;
  --mist: #A2A8C3;

  /* --- Colour · the law ---
     OTP is represented exclusively by lavender.
     OTT is represented exclusively by turquoise.
     Everything shared combines both, as the mesh. */
  --otp: #C7BCF4;
  --otp-bright: #E6E0FC;
  --ott: #5FD4DC;
  --mesh: linear-gradient(100deg, #C7BCF4, #E6E0FC 45%, #5FD4DC);
  --mesh-point: radial-gradient(circle at 35% 35%, #E6E0FC, #C7BCF4 45%, #5FD4DC 100%);

  /* --- Colour · light --- */
  --glow-otp: rgba(199, 188, 244, 0.9);
  --glow-ott: rgba(95, 212, 220, 0.5);
  --lamp-core: rgba(230, 224, 252, 0.17);
  --lamp-mid: rgba(199, 188, 244, 0.10);
  --lamp-haze: rgba(95, 212, 220, 0.05);
  --selection: rgba(147, 200, 232, 0.35);

  /* --- Glass --- */
  --glass-fill: linear-gradient(135deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.035));
  --glass-edge: linear-gradient(160deg, rgba(255, 255, 255, 0.30), rgba(255, 255, 255, 0.05) 45%, rgba(255, 255, 255, 0.18));
  --glass-sheen: linear-gradient(115deg, rgba(255, 255, 255, 0.09), transparent 42%);
  --glass-blur: 22px;
  --glass-inner: rgba(255, 255, 255, 0.045);
  --glass-inner-edge: rgba(255, 255, 255, 0.10);

  /* --- Typography --- */
  --font-display: 'Quicksand', 'Nunito', system-ui, sans-serif;
  --font-body: 'Nunito', system-ui, sans-serif;
  --font-mono: 'Spline Sans Mono', 'Courier New', monospace;

  --text-display: clamp(2.5rem, 6vw, 4.4rem);
  --text-heading: clamp(1.9rem, 3.6vw, 2.8rem);
  --text-statement: clamp(1.7rem, 3.4vw, 2.5rem);
  --text-title: 1.7rem;
  --text-chip: 1.26rem;
  --text-body: 1.06rem;
  --text-detail: 0.97rem;
  --text-small: 0.9rem;
  --text-mono: 0.72rem;

  --leading-display: 1.12;
  --leading-body: 1.7;
  --tracking-mono: 0.16em;

  /* --- Space --- */
  --space-xs: 8px;
  --space-sm: 14px;
  --space-md: 22px;
  --space-lg: 32px;
  --space-xl: 48px;
  --space-2xl: 72px;
  --section-pad: clamp(76px, 12vh, 140px);
  --container: 1120px;
  --gutter: clamp(20px, 5vw, 48px);

  /* --- Shape --- */
  --radius-lg: 22px;
  --radius-md: 14px;
  --radius-pill: 999px;

  --hairline: rgba(255, 255, 255, 0.08);
  --bar-fill: rgba(16, 19, 30, 0.55);
  --glass-light: rgba(255, 255, 255, 0.10);
  --page-glow-otp: rgba(199, 188, 244, 0.14);
  --page-glow-ott: rgba(95, 212, 220, 0.10);

  /* --- Depth --- */
  --shadow-panel: 0 24px 60px rgba(5, 8, 18, 0.45);

  /* --- Motion --- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-reveal: 0.8s;

  /* --- Layers --- */
  --z-lamp: 0;
  --z-page: 2;
  --z-bar: 20;
  --z-grain: 40;

  /* --- Texture --- */
  --grain-opacity: 0.05;
}

@media (max-width: 720px) {
  :root {
    --glass-blur: 14px;
    --section-pad: clamp(64px, 10vh, 96px);
  }
}