/* Cruvels Design Tokens — 8px grid system */
:root {
  /* Spacing (8px base) */
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.25rem;   /* 20px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
  --space-20: 5rem;     /* 80px */
  --space-24: 6rem;     /* 96px */
  --space-32: 8rem;     /* 128px */

  /* Layout */
  --max: 1200px;
  --max-narrow: 720px;
  --max-wide: 1400px;
  --header-height: 64px;
  --header-height-scrolled: 56px;

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* Typography scale */
  --font-sans: "IBM Plex Sans", system-ui, sans-serif;
  --font-display: "Space Grotesk", var(--font-sans);
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --text-5xl: 3rem;
  --text-6xl: 3.75rem;
  --text-hero: clamp(2.15rem, 4.8vw, 3.5rem);

  --leading-tight: 1.15;
  --leading-snug: 1.35;
  --leading-normal: 1.6;
  --tracking-tight: -0.025em;
  --tracking-wide: 0.06em;

  /* Motion */
  --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-base: 250ms;
  --duration-slow: 450ms;
  --duration-slower: 700ms;

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(2, 9, 19, 0.12);
  --shadow-md: 0 12px 32px rgba(2, 9, 19, 0.2);
  --shadow-lg: 0 28px 64px rgba(2, 9, 19, 0.34);
  --shadow-glow-blue: 0 0 48px rgba(92, 167, 255, 0.15);
  --shadow-glow-gold: 0 0 48px rgba(212, 177, 95, 0.12);

  /* Z-index */
  --z-ambient: -1;
  --z-base: 1;
  --z-sticky: 20;
  --z-overlay: 40;
  --z-modal: 50;
  --z-toast: 60;
}

/* Navy + Gold theme (default) */
:root,
[data-theme="dark"] {
  color-scheme: dark;

  --navy: #071424;
  --navy-mid: #0c2340;
  --navy-light: #14325a;
  --navy-soft: #1a3f6e;

  --bg: #071424;
  --bg-elevated: #0a1c33;
  --bg-surface: #0f2744;
  --bg-muted: rgba(12, 35, 64, 0.65);

  --panel: rgba(12, 35, 64, 0.78);
  --panel-strong: rgba(7, 20, 36, 0.94);
  --panel-soft: rgba(20, 50, 90, 0.45);
  --glass: rgba(7, 20, 36, 0.82);

  --text: #f4f7fb;
  --text-secondary: #c8d6e8;
  --muted: #8fa8c4;
  --muted-soft: #6b849f;

  --line: rgba(212, 177, 95, 0.14);
  --line-strong: rgba(212, 177, 95, 0.28);

  --gold: #d4b15f;
  --gold-soft: #f0dca5;
  --gold-strong: #b8923f;
  --gold-muted: rgba(212, 177, 95, 0.16);

  --accent: #d4b15f;
  --accent-soft: #f0dca5;
  --accent-muted: rgba(212, 177, 95, 0.14);

  --blue: #3d7ab8;
  --blue-soft: #5ca7ff;
  --blue-muted: rgba(61, 122, 184, 0.14);

  --success: #5ee4a8;
  --warning: #f0c060;
  --error: #ff8a8a;

  --shadow-glow-blue: 0 0 48px rgba(61, 122, 184, 0.12);
  --shadow-glow-gold: 0 0 48px rgba(212, 177, 95, 0.2);

  --gradient-hero: radial-gradient(ellipse 80% 60% at 50% -20%, rgba(212, 177, 95, 0.14), transparent),
    radial-gradient(ellipse 50% 40% at 90% 20%, rgba(61, 122, 184, 0.1), transparent),
    linear-gradient(180deg, #071424 0%, #0c2340 50%, #071424 100%);

  --gradient-mesh: conic-gradient(from 180deg at 50% 50%, rgba(212, 177, 95, 0.07), rgba(61, 122, 184, 0.05), rgba(212, 177, 95, 0.07));
}

/* Light theme — navy text, gold accents */
[data-theme="light"] {
  color-scheme: light;

  --navy: #071424;
  --navy-mid: #0c2340;
  --navy-light: #14325a;

  --bg: #f6f8fb;
  --bg-elevated: #ffffff;
  --bg-surface: #eef2f7;
  --bg-muted: rgba(238, 242, 247, 0.95);

  --panel: rgba(255, 255, 255, 0.92);
  --panel-strong: #ffffff;
  --panel-soft: rgba(255, 255, 255, 0.75);
  --glass: rgba(255, 255, 255, 0.88);

  --text: #071424;
  --text-secondary: #14325a;
  --muted: #4a6280;
  --muted-soft: #6b849f;

  --line: rgba(7, 20, 36, 0.1);
  --line-strong: rgba(7, 20, 36, 0.18);

  --gold: #b8923f;
  --gold-soft: #d4b15f;
  --gold-strong: #96752e;
  --gold-muted: rgba(184, 146, 63, 0.12);

  --accent: #b8923f;
  --accent-soft: #d4b15f;
  --accent-muted: rgba(184, 146, 63, 0.12);

  --blue: #1a4a7a;
  --blue-soft: #2d6aa8;
  --blue-muted: rgba(26, 74, 122, 0.1);

  --shadow-sm: 0 2px 8px rgba(7, 20, 36, 0.06);
  --shadow-md: 0 12px 32px rgba(7, 20, 36, 0.08);
  --shadow-lg: 0 28px 64px rgba(7, 20, 36, 0.12);
  --shadow-glow-blue: 0 0 48px rgba(26, 74, 122, 0.08);
  --shadow-glow-gold: 0 0 48px rgba(184, 146, 63, 0.12);

  --gradient-hero: radial-gradient(ellipse 80% 60% at 50% -20%, rgba(212, 177, 95, 0.1), transparent),
    radial-gradient(ellipse 50% 40% at 90% 20%, rgba(26, 74, 122, 0.06), transparent),
    linear-gradient(180deg, #f6f8fb 0%, #eef2f7 50%, #e8edf4 100%);

  --gradient-mesh: conic-gradient(from 180deg at 50% 50%, rgba(212, 177, 95, 0.05), rgba(26, 74, 122, 0.04), rgba(212, 177, 95, 0.05));
}

/* Cru — light blue product theme */
[data-product-theme="cru"] {
  color-scheme: light;
  --navy: #0f2138;
  --navy-mid: #143a63;
  --navy-deep: #0a2540;
  --bg: #f7faff;
  --bg-elevated: #ffffff;
  --bg-surface: #eef4fc;
  --bg-muted: rgba(238, 244, 252, 0.95);
  --panel: rgba(255, 255, 255, 0.94);
  --panel-strong: #ffffff;
  --panel-soft: rgba(243, 248, 255, 0.88);
  --glass: rgba(255, 255, 255, 0.9);
  --text: #0f2138;
  --text-secondary: #143a63;
  --muted: #5c718a;
  --muted-soft: #7a92ad;
  --line: rgba(20, 58, 99, 0.12);
  --line-strong: rgba(20, 58, 99, 0.22);
  --accent: #2d6aa8;
  --accent-soft: #5ca7ff;
  --accent-muted: rgba(45, 106, 168, 0.12);
  --gold: #d4b15f;
  --gold-soft: #e8c97a;
  --gold-muted: rgba(212, 177, 95, 0.12);
  --success: #166b4e;
  --warning: #9f6d00;
  --shadow-glow-blue: 0 0 48px rgba(20, 58, 99, 0.12);
  --gradient-hero:
    radial-gradient(ellipse 80% 60% at 50% -20%, rgba(20, 58, 99, 0.08), transparent),
    radial-gradient(ellipse 50% 40% at 90% 20%, rgba(90, 165, 255, 0.1), transparent),
    linear-gradient(180deg, #ffffff 0%, #f7faff 50%, #eef4fc 100%);
  --gradient-mesh: conic-gradient(from 180deg at 50% 50%, rgba(20, 58, 99, 0.05), rgba(90, 165, 255, 0.04), rgba(20, 58, 99, 0.05));
}
[data-product-theme="cru"] .ambient .glow-left { background: rgba(20, 58, 99, 0.1); }
[data-product-theme="cru"] .ambient .glow-right { background: rgba(90, 165, 255, 0.1); }

/* BRIEFLY — yellow + navy product theme */
[data-product-theme="legal"] {
  color-scheme: light;
  --navy: #172f4d;
  --navy-deep: #0f2237;
  --navy-mid: #1a3d5c;
  --gold: #f0c84c;
  --gold-strong: #d6a719;
  --gold-soft: #fff1bc;
  --gold-muted: rgba(240, 200, 76, 0.18);
  --bg: #fffdf7;
  --bg-elevated: #ffffff;
  --bg-surface: #fff8e6;
  --bg-muted: rgba(255, 248, 230, 0.95);
  --panel: rgba(255, 255, 255, 0.96);
  --panel-strong: #ffffff;
  --panel-soft: rgba(255, 249, 232, 0.9);
  --glass: rgba(255, 255, 255, 0.92);
  --text: #172335;
  --text-secondary: #172f4d;
  --muted: #5f6774;
  --muted-soft: #8a919c;
  --line: rgba(138, 113, 33, 0.14);
  --line-strong: rgba(138, 113, 33, 0.26);
  --accent: #d6a719;
  --accent-soft: #f0c84c;
  --accent-muted: rgba(240, 200, 76, 0.16);
  --success: #166b4e;
  --warning: #9f6d00;
  --shadow-glow-gold: 0 0 48px rgba(240, 200, 76, 0.2);
  --gradient-hero:
    radial-gradient(ellipse 80% 60% at 50% -20%, rgba(240, 200, 76, 0.14), transparent),
    radial-gradient(ellipse 50% 40% at 90% 20%, rgba(23, 47, 77, 0.08), transparent),
    linear-gradient(180deg, #ffffff 0%, #fffdf7 50%, #fff8e6 100%);
  --gradient-mesh: conic-gradient(from 180deg at 50% 50%, rgba(240, 200, 76, 0.07), rgba(23, 47, 77, 0.05), rgba(240, 200, 76, 0.07));
}
[data-product-theme="legal"] .ambient .glow-left { background: rgba(240, 200, 76, 0.16); }
[data-product-theme="legal"] .ambient .glow-right { background: rgba(23, 47, 77, 0.1); }

/* CRU Connect — emerald + mint healthcare theme */
[data-product-theme="hospital"] {
  color-scheme: light;
  --navy: #064e3b;
  --navy-deep: #022c22;
  --navy-mid: #065f46;
  --mint: #d1fae5;
  --mint-soft: #ecfdf5;
  --emerald: #059669;
  --emerald-soft: #34d399;
  --emerald-muted: rgba(5, 150, 105, 0.12);
  --bg: #ffffff;
  --bg-elevated: #ffffff;
  --bg-surface: #f0fdf4;
  --bg-muted: rgba(240, 253, 244, 0.95);
  --panel: rgba(255, 255, 255, 0.96);
  --panel-strong: #ffffff;
  --panel-soft: rgba(236, 253, 245, 0.9);
  --glass: rgba(255, 255, 255, 0.92);
  --text: #022c22;
  --text-secondary: #064e3b;
  --muted: #4b6b5f;
  --muted-soft: #6b8f82;
  --line: rgba(5, 150, 105, 0.12);
  --line-strong: rgba(5, 150, 105, 0.22);
  --accent: #059669;
  --accent-soft: #34d399;
  --accent-muted: rgba(5, 150, 105, 0.12);
  --gold: #059669;
  --gold-soft: #34d399;
  --gold-muted: rgba(5, 150, 105, 0.12);
  --success: #047857;
  --warning: #b45309;
  --shadow-glow-gold: 0 0 48px rgba(5, 150, 105, 0.16);
  --shadow-glow-blue: 0 0 48px rgba(52, 211, 153, 0.12);
  --gradient-hero:
    radial-gradient(ellipse 80% 60% at 50% -20%, rgba(5, 150, 105, 0.1), transparent),
    radial-gradient(ellipse 50% 40% at 90% 20%, rgba(209, 250, 229, 0.5), transparent),
    linear-gradient(180deg, #ffffff 0%, #f0fdf4 50%, #ecfdf5 100%);
  --gradient-mesh: conic-gradient(from 180deg at 50% 50%, rgba(5, 150, 105, 0.06), rgba(209, 250, 229, 0.08), rgba(5, 150, 105, 0.06));
}
[data-product-theme="hospital"] .ambient .glow-left { background: rgba(5, 150, 105, 0.12); }
[data-product-theme="hospital"] .ambient .glow-right { background: rgba(209, 250, 229, 0.4); }

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-slow: 0ms;
    --duration-slower: 0ms;
  }
}