/*
 * Octowork waitlist — canonical brand design tokens.
 *
 * Mirrors the shipped Flutter "Forest" theme (lib/src/theme/theme_registry.dart)
 * so the marketing site and the product feel like one brand.
 * Variants may override these for their own mood (dark/light/duotone) but should
 * start from this palette. Uses logical properties downstream for RTL safety.
 */
:root {
  /* ---- Brand: Forest ---- */
  --forest: #2d6a4f;
  --forest-dark: #1b4332;
  --forest-deep: #0f2a1e;
  --moss: #a7c957;
  --moss-bright: #b9d96a;
  --cream: #faf7f0;
  --copper: #c8935f;
  --copper-deep: #4a2f1a;
  --forest-surface: #1b3a2b;
  --forest-surface-hi: #254832;

  /* ---- Neutral (zinc) ramp, for clean light/dark UI ---- */
  --ink-950: #09090b;
  --ink-900: #18181b;
  --ink-800: #27272a;
  --ink-700: #3f3f46;
  --ink-500: #71717a;
  --ink-400: #a1a1aa;
  --ink-200: #e4e4e7;
  --ink-100: #f4f4f5;
  --white: #ffffff;

  /* ---- Semantic (light theme default) ---- */
  --bg: var(--cream);
  --bg-elev: var(--white);
  --surface: var(--white);
  --text: #14211a;
  --text-muted: #4b5a52;
  --border: #e3ddd0;
  --primary: var(--forest);
  --primary-ink: var(--cream);
  --accent: var(--copper);
  --highlight: var(--moss);
  --ring: color-mix(in srgb, var(--forest) 45%, transparent);

  /* ---- Type ---- */
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", "Noto Sans Hebrew", "Assistant",
    "Heebo", sans-serif;
  --font-display: "Sora", "Plus Jakarta Sans", var(--font-sans);
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  /* fluid type scale */
  --step--1: clamp(0.83rem, 0.78rem + 0.25vw, 0.95rem);
  --step-0: clamp(1rem, 0.95rem + 0.3vw, 1.12rem);
  --step-1: clamp(1.2rem, 1.1rem + 0.6vw, 1.5rem);
  --step-2: clamp(1.5rem, 1.3rem + 1.2vw, 2.1rem);
  --step-3: clamp(2rem, 1.6rem + 2.4vw, 3.2rem);
  --step-4: clamp(2.6rem, 2rem + 4vw, 5rem);
  --step-5: clamp(3.2rem, 2.2rem + 6vw, 6.5rem);

  /* ---- Space / radius / shadow / motion ---- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-24: 6rem;
  --sp-32: 8rem;

  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 22px;
  --radius-xl: 32px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(15, 42, 30, 0.08);
  --shadow: 0 10px 30px -12px rgba(15, 42, 30, 0.25);
  --shadow-lg: 0 30px 60px -20px rgba(15, 42, 30, 0.35);
  --shadow-glow: 0 0 0 1px var(--ring), 0 20px 60px -20px rgba(45, 106, 79, 0.45);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 160ms;
  --dur: 320ms;
  --dur-slow: 640ms;

  --maxw: 1140px;
  --maxw-prose: 65ch;
}

/* Dark theme: deep-forest ground, moss as primary (matches product dark scheme). */
:root[data-theme="dark"] {
  --bg: var(--forest-deep);
  --bg-elev: var(--forest-surface);
  --surface: var(--forest-surface);
  --text: #eaf3ec;
  --text-muted: #9db8a7;
  --border: #2c4e3b;
  --primary: var(--moss);
  --primary-ink: #0f2a1e;
  --accent: var(--copper);
  --highlight: var(--moss-bright);
  --ring: color-mix(in srgb, var(--moss) 50%, transparent);
  --shadow: 0 14px 40px -16px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 40px 80px -24px rgba(0, 0, 0, 0.7);
}

/* Neutral "Linear/Vercel" dark, for variants that want a non-green editorial mood. */
:root[data-theme="ink"] {
  --bg: var(--ink-950);
  --bg-elev: var(--ink-900);
  --surface: var(--ink-900);
  --text: #fafafa;
  --text-muted: var(--ink-400);
  --border: var(--ink-800);
  --primary: var(--moss);
  --primary-ink: #0a0a0a;
  --accent: var(--copper);
  --highlight: var(--moss-bright);
  --ring: color-mix(in srgb, var(--moss) 45%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Minimal reset shared by variants that opt in. */
.octo-reset *,
.octo-reset *::before,
.octo-reset *::after {
  box-sizing: border-box;
}
.octo-reset body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  font-size: var(--step-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}