/* ==========================================================================
   Tiki — Design Tokens
   Single source of truth for colour, type, space, motion and elevation.
   ========================================================================== */

:root {
  /* ---------------------------------------------------------------- Brand */
  --tiki-green: #006b35;
  --tiki-green-dark: #004d27;
  --tiki-green-deep: #00381d;
  --tiki-green-light: #eaf5ee;
  --tiki-green-mist: #f2f9f5;
  --tiki-green-ink: #0a3d23;

  /* ------------------------------------------------------------- Neutrals */
  --white: #ffffff;
  --off-white: #f7f9f7;
  --ink: #111111;
  --ink-soft: #374151;
  --muted: #6b7280;
  --muted-soft: #9ca3af;
  --border: #e5e7eb;
  --border-soft: #eef1ef;
  --border-strong: #d5dad7;

  /* ------------------------------------------- Semantic / functional hues */
  --positive: #006b35;
  --positive-bg: #eaf5ee;
  --caution: #b45309;
  --caution-bg: #fdf6ec;
  --critical: #b42318;

  /* ------------------------------------------------------- Product mockups */
  --mock-bg: #fbfcfb;
  --mock-panel: #ffffff;
  --mock-inset: #f4f6f5;
  --mock-bar: #eceeed;

  /* ----------------------------------------------------------------- Type */
  --font-sans:
    -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter",
    "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans Arabic", "Segoe UI",
    Tahoma, Arial, sans-serif;
  --font-mono:
    ui-monospace, "SF Mono", SFMono-Regular, "JetBrains Mono", Menlo, Consolas,
    monospace;

  /* Fluid type scale — 320px → 1440px viewports */
  --fs-display: clamp(3rem, 1.35rem + 7.2vw, 7.5rem);
  --fs-h1: clamp(2.5rem, 1.4rem + 4.6vw, 5rem);
  --fs-h2: clamp(2rem, 1.35rem + 2.8vw, 3.5rem);
  --fs-h3: clamp(1.5rem, 1.2rem + 1.3vw, 2.125rem);
  --fs-h4: clamp(1.1875rem, 1.06rem + 0.55vw, 1.5rem);
  --fs-lead: clamp(1.0625rem, 0.98rem + 0.4vw, 1.3125rem);
  --fs-body: clamp(1rem, 0.97rem + 0.14vw, 1.0625rem);
  --fs-sm: 0.9375rem;
  --fs-xs: 0.8125rem;
  --fs-eyebrow: 0.75rem;

  --lh-display: 0.98;
  --lh-tight: 1.08;
  --lh-snug: 1.28;
  --lh-body: 1.65;

  --ls-display: -0.035em;
  --ls-tight: -0.022em;
  --ls-snug: -0.014em;
  --ls-body: -0.006em;
  --ls-eyebrow: 0.09em;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* ---------------------------------------------------------------- Space */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 2.5rem;
  --sp-8: 3rem;
  --sp-9: 4rem;
  --sp-10: 5rem;
  --sp-11: 6.5rem;

  /* Vertical rhythm between major sections */
  --section-y: clamp(4.5rem, 2.2rem + 9.5vw, 10.5rem);
  --section-y-tight: clamp(3.5rem, 2rem + 6vw, 7rem);

  /* --------------------------------------------------------------- Layout */
  --shell: 1240px;
  --shell-narrow: 880px;
  --shell-wide: 1440px;
  --gutter: clamp(1.25rem, 0.7rem + 2.6vw, 3rem);
  --nav-h: 68px;

  /* --------------------------------------------------------------- Radius */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-2xl: 36px;
  --r-pill: 999px;

  /* ------------------------------------------------------------ Elevation */
  --sh-hairline: 0 0 0 1px var(--border);
  --sh-xs: 0 1px 2px rgba(17, 17, 17, 0.04);
  --sh-sm:
    0 1px 2px rgba(17, 17, 17, 0.04), 0 4px 12px rgba(17, 17, 17, 0.04);
  --sh-md:
    0 2px 4px rgba(17, 17, 17, 0.03), 0 12px 28px rgba(17, 17, 17, 0.06);
  --sh-lg:
    0 4px 8px rgba(17, 17, 17, 0.03), 0 24px 56px rgba(17, 17, 17, 0.08);
  --sh-device:
    0 2px 6px rgba(17, 17, 17, 0.05),
    0 18px 40px -12px rgba(0, 77, 39, 0.14),
    0 40px 80px -32px rgba(0, 77, 39, 0.16);
  --sh-nav: 0 1px 0 var(--border-soft);

  /* --------------------------------------------------------------- Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);

  --dur-fast: 160ms;
  --dur-base: 280ms;
  --dur-slow: 560ms;
  --dur-reveal: 900ms;

  /* ------------------------------------------------------------- Controls */
  --focus-ring: 0 0 0 2px var(--white), 0 0 0 4px var(--tiki-green);
  --focus-ring-dark: 0 0 0 2px var(--tiki-green-deep), 0 0 0 4px #7fd0a3;

  /* ------------------------------------------------------------ Z-indexes */
  --z-base: 1;
  --z-sticky: 40;
  --z-nav: 60;
  --z-overlay: 70;
  --z-skip: 90;
}

/* Reduced-motion contract: honour the OS setting everywhere. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 1ms;
    --dur-base: 1ms;
    --dur-slow: 1ms;
    --dur-reveal: 1ms;
  }
}