/* Orla · component palette (the coded system screens, the lead form, the ciclo animation, the logo).
   The page itself runs on the ported TMC system in /public/sg (tokens.css: dark, black & white). These tokens keep
   their original LIGHT meaning because the product screens are a light UI shown on the dark page (like TMC's light
   phone mockup on its dark hero). Fonts and layout tokens (--font-*, --gutter, --container, --section-y, --nav-h)
   live only in /sg/tokens.css. Neutrals carry a trace of sand (hue 85). */
:root {
  --paper: oklch(98.2% 0.004 85);
  --paper-2: oklch(95.8% 0.005 85);
  --card: oklch(99.5% 0.002 85);
  --ink: oklch(17% 0.006 85);
  --ink-2: oklch(30% 0.006 85);
  --muted: oklch(46% 0.006 85);
  --line: oklch(89% 0.005 85);
  --line-strong: oklch(80% 0.006 85);
  --night-2: oklch(20.5% 0.006 85);
  --night-3: oklch(26% 0.006 85);
  --night-line: oklch(31% 0.006 85);
  --on-night: oklch(96% 0.004 85);
  --on-night-muted: oklch(76% 0.006 85);

  --fs-h1: clamp(2.6rem, 7.2vw, 5.4rem);
  --fs-h2: clamp(2rem, 4.4vw, 3.4rem);
  --fs-h3: clamp(1.2rem, 1.6vw, 1.45rem);
  --fs-lead: clamp(1.0625rem, 1.3vw, 1.25rem);
  --fs-body: 1.0625rem;
  --fs-small: 0.875rem;
  --fs-tiny: 0.78rem;

  --r-pill: 999px;
  --r-card: 24px;
  --r-screen: 14px;

  --shadow-1: 0 1px 2px oklch(0% 0 0 / 0.3), 0 4px 14px -4px oklch(0% 0 0 / 0.35);
  --shadow-2: 0 2px 6px oklch(0% 0 0 / 0.3), 0 24px 48px -18px oklch(0% 0 0 / 0.55);
  --shadow-screen: 0 2px 8px oklch(0% 0 0 / 0.35), 0 40px 80px -30px oklch(0% 0 0 / 0.7);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-1: 160ms;
  --dur-2: 240ms;
  --dur-3: 480ms;

  --z-raised: 2;
  --z-sheet: 60;
  --z-toast: 70;

  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}