/* ============================================
   DESIGN TOKENS — CNL Construction | Pools
   OKLCH Color System + Typography Scale
   ============================================ */

:root {
  /* ---- Primary Palette (OKLCH) — Matched to CNL logo blue ---- */
  --color-primary: oklch(0.35 0.12 240);
  --color-primary-light: oklch(0.48 0.14 235);
  --color-primary-dark: oklch(0.22 0.10 240);
  --color-accent: oklch(0.58 0.16 235);
  --color-accent-light: oklch(0.70 0.12 235);

  /* ---- Neutral Palette ---- */
  --color-white: oklch(0.99 0 0);
  --color-off-white: oklch(0.97 0.005 230);
  --color-gray-100: oklch(0.93 0.005 230);
  --color-gray-200: oklch(0.87 0.008 230);
  --color-gray-300: oklch(0.75 0.01 230);
  --color-gray-400: oklch(0.55 0.015 230);
  --color-gray-500: oklch(0.40 0.02 230);
  --color-gray-900: oklch(0.15 0.03 230);
  --color-black: oklch(0.10 0.02 240);

  /* ---- Semantic ---- */
  --color-success: oklch(0.65 0.18 145);
  --color-surface: var(--color-white);
  --color-surface-alt: var(--color-off-white);
  --color-text: var(--color-gray-900);
  --color-text-muted: var(--color-gray-400);
  --color-text-inverse: var(--color-white);

  /* ---- Cursor Glow ---- */
  --cursor-glow: oklch(0.55 0.15 235 / 0.25);
  --cursor-glow-size: 350px;

  /* ---- Typography ---- */
  --font-display: 'Inter', system-ui, -apple-system, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;

  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.8125rem);
  --text-sm: clamp(0.8125rem, 0.75rem + 0.3vw, 0.9375rem);
  --text-base: clamp(0.9375rem, 0.875rem + 0.3vw, 1.0625rem);
  --text-lg: clamp(1.0625rem, 0.95rem + 0.5vw, 1.25rem);
  --text-xl: clamp(1.25rem, 1.05rem + 0.9vw, 1.5rem);
  --text-2xl: clamp(1.5rem, 1.15rem + 1.5vw, 2rem);
  --text-3xl: clamp(1.875rem, 1.3rem + 2.5vw, 2.75rem);
  --text-4xl: clamp(2.25rem, 1.4rem + 3.6vw, 3.75rem);
  --text-5xl: clamp(2.75rem, 1.5rem + 5vw, 5rem);

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

  --leading-tight: 1.1;
  --leading-snug: 1.25;
  --leading-normal: 1.6;
  --leading-relaxed: 1.75;

  --tracking-tight: -0.025em;
  --tracking-normal: 0;
  --tracking-wide: 0.05em;
  --tracking-wider: 0.1em;

  /* ---- Spacing ---- */
  --space-xs: clamp(0.25rem, 0.2rem + 0.25vw, 0.5rem);
  --space-sm: clamp(0.5rem, 0.4rem + 0.5vw, 0.75rem);
  --space-md: clamp(0.75rem, 0.6rem + 0.75vw, 1.25rem);
  --space-lg: clamp(1.25rem, 1rem + 1.25vw, 2rem);
  --space-xl: clamp(2rem, 1.5rem + 2.5vw, 3.5rem);
  --space-2xl: clamp(3rem, 2rem + 4vw, 5.5rem);
  --space-3xl: clamp(4.5rem, 3rem + 6vw, 8rem);

  /* ---- Layout ---- */
  --container-max: 1280px;
  --container-narrow: 800px;
  --container-wide: 1440px;
  --gutter: clamp(1rem, 0.5rem + 2vw, 2rem);

  /* ---- Borders & Radius ---- */
  --radius-sm: 0.375rem;
  --radius-md: 0.625rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-full: 9999px;

  /* ---- Shadows ---- */
  --shadow-sm: 0 1px 2px oklch(0.15 0.02 230 / 0.06);
  --shadow-md: 0 4px 12px oklch(0.15 0.02 230 / 0.08);
  --shadow-lg: 0 8px 30px oklch(0.15 0.02 230 / 0.12);
  --shadow-xl: 0 16px 50px oklch(0.15 0.02 230 / 0.16);

  /* ---- Transitions ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 150ms;
  --duration-normal: 300ms;
  --duration-slow: 500ms;
  --duration-slower: 800ms;

  /* ---- Z-index ---- */
  --z-cursor: 9999;
  --z-nav: 1000;
  --z-overlay: 900;
  --z-modal: 800;
}

/* ---- Fallback for browsers without OKLCH ---- */
@supports not (color: oklch(0.5 0.1 200)) {
  :root {
    --color-primary: #1a3a5c;
    --color-primary-light: #2d5f8a;
    --color-primary-dark: #0e1f33;
    --color-accent: #3a8fb7;
    --color-accent-light: #7abcd4;
    --color-white: #fcfcfc;
    --color-off-white: #f5f6f8;
    --color-gray-100: #ebedf0;
    --color-gray-200: #d5d8de;
    --color-gray-300: #a8adb8;
    --color-gray-400: #6d7585;
    --color-gray-500: #4a5568;
    --color-gray-900: #1a1e2a;
    --color-black: #0d1017;
    --color-success: #3da86b;
    --cursor-glow: rgba(42, 100, 150, 0.25);
  }
}