/* OFT Labs design tokens - deep-ocean premium tech.
   Semantic tokens only; components never use raw hex. Choices explained in build/web1/design_system.md.
   Contrast of every text pair is measured by tools/contrast.py (WCAG AA: 4.5:1 text, 3:1 large text / UI). */
:root {
  /* palette (primitive) */
  --p-abyss: #020A16;
  --p-navy-900: #04142A;
  --p-navy-800: #071D3A;
  --p-navy-700: #0B2A50;
  --p-navy-600: #12386A;
  --p-ink-50: #EEF7FB;
  --p-ink-200: #B9CFDF;
  --p-ink-300: #93AEC4;
  --p-aqua-300: #67E8F9;
  --p-aqua-400: #22D3EE;
  --p-aqua-700: #0E7490;
  --p-coral-300: #FFB199;
  --p-coral-400: #FF8A65;
  --p-coral-600: #E0613D;
  --p-teal-400: #2DD4BF;
  --p-ow-400: #3FD6E0;      /* Open Water (AI Studio) */
  --p-ow-700: #0A7C8F;
  --p-reef-400: #F07A5F;    /* Reef (Fresh Media) coral */
  --p-reef-teal: #2DD4BF;

  /* semantic */
  --bg: var(--p-abyss);
  --bg-raised: var(--p-navy-900);
  --surface: var(--p-navy-800);
  --surface-2: var(--p-navy-700);
  --surface-glass: rgba(7, 29, 58, .72);
  --border: rgba(103, 232, 249, .16);
  --border-strong: rgba(103, 232, 249, .34);
  --text: var(--p-ink-50);
  --text-muted: var(--p-ink-200);
  --text-subtle: var(--p-ink-300);
  --primary: var(--p-aqua-400);
  --primary-hover: var(--p-aqua-300);
  --on-primary: #032430;
  --accent: var(--p-coral-400);
  --accent-soft: var(--p-coral-300);
  --on-accent: #2A0D04;
  --ring: var(--p-aqua-300);
  --success: var(--p-teal-400);

  /* per-tool tints (Brief 79 themes) */
  --tint-ais: var(--p-ow-400);
  --tint-ais-deep: var(--p-ow-700);
  --tint-ul: var(--p-aqua-400);
  --tint-ul-deep: #050E1F;
  --tint-fm: var(--p-reef-400);
  --tint-fm-2: var(--p-reef-teal);

  /* type: system stack (no web font download) */
  --font: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Roboto, Arial, sans-serif;
  --font-display: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Roboto, Arial, sans-serif;
  --fs-12: .75rem; --fs-14: .875rem; --fs-16: 1rem; --fs-18: 1.125rem; --fs-20: 1.25rem;
  --fs-24: 1.5rem; --fs-32: 2rem; --fs-40: 2.5rem;
  --fs-hero: clamp(2.25rem, 1.2rem + 4.6vw, 4.5rem);
  --fs-h2: clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem);
  --lh-tight: 1.12; --lh-snug: 1.3; --lh-body: 1.6;
  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;

  /* spacing (4/8 scale, spacious) */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;
  --gutter: clamp(20px, 4vw, 72px);
  --container: calc(1760px + 2 * var(--gutter));   /* layout fix: content up to 1760 px, centred only above that */
  --measure: 68ch;

  /* shape and depth */
  --r-sm: 8px; --r-md: 14px; --r-lg: 22px; --r-xl: 32px; --r-pill: 999px;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .35), 0 6px 18px rgba(0, 0, 0, .25);
  --shadow-2: 0 18px 50px rgba(0, 0, 0, .45);
  --glow: 0 0 0 1px var(--border-strong), 0 18px 60px rgba(34, 211, 238, .14);

  /* motion */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in: cubic-bezier(.4, 0, 1, 1);
  --t-fast: 160ms; --t-med: 280ms; --t-slow: 520ms;
  --stagger: 45ms;

  /* layers */
  --z-base: 0; --z-raised: 10; --z-sticky: 40; --z-overlay: 100; --z-modal: 1000;
  --nav-h: 68px;
  color-scheme: dark;
}