/* ==========================================================================
   Shine Vision — Design Tokens
   Palette derived from the brand logo (assets/shinevision-logo.jpg):
   deep midnight blue, electric primary blue and light sky cyan.
   ========================================================================== */

:root {
  /* ---- Brand colors (from logo) ---- */
  --midnight-900: #041226;
  --midnight-800: #071b3d;
  --midnight-700: #0b2856;
  --midnight-600: #0f3570;
  --primary-700: #00408f;
  --primary-600: #0056ab;
  --primary-500: #0070c9;
  --primary-400: #2a94e0;
  --cyan-400: #3fc1f0;
  --cyan-300: #6fd0ff;
  --cyan-200: #9fe0fc;
  --cyan-100: #c9eefc;
  --cyan-50: #e9f8fe;

  /* ---- Neutrals ---- */
  --white: #ffffff;
  --bg: #f4f7fb;
  --bg-alt: #eaf2fa;
  --bg-deep: #e2ecf7;
  --surface: #ffffff;
  --surface-glass: rgba(255, 255, 255, 0.62);
  --surface-glass-strong: rgba(255, 255, 255, 0.82);
  --border: #e1e9f5;
  --border-strong: #cddbee;

  --ink-900: #0a1626;
  --ink-800: #16233a;
  --ink-700: #29384f;
  --ink-600: #48597a;
  --ink-500: #647392;
  --ink-400: #8a97b3;
  --ink-300: #b3bfd6;
  --ink-100: #e8edf7;

  /* ---- Semantic ---- */
  --success: #16c784;
  --success-bg: #e4faf1;
  --warning: #f5a524;
  --warning-bg: #fef3e0;
  --danger: #f23d5c;
  --danger-bg: #fde8ec;
  --info: var(--primary-500);
  --info-bg: var(--cyan-50);

  /* ---- Gradients ---- */
  --grad-brand: linear-gradient(135deg, var(--primary-700) 0%, var(--primary-500) 52%, var(--cyan-300) 100%);
  /* Softer, low-contrast variant for small pill-shaped buttons/chips — the wide diagonal
     gradient above reads as a dark "edge" on short, wide shapes; this avoids that. */
  --grad-brand-btn: linear-gradient(90deg, var(--primary-600) 0%, var(--primary-500) 100%);
  --grad-brand-soft: linear-gradient(135deg, rgba(0, 64, 143, 0.12) 0%, rgba(111, 208, 255, 0.14) 100%);
  --grad-midnight: linear-gradient(160deg, var(--midnight-900) 0%, var(--midnight-700) 55%, var(--primary-700) 120%);
  --grad-text: linear-gradient(100deg, var(--primary-700) 0%, var(--primary-500) 45%, var(--cyan-400) 100%);
  --grad-line: linear-gradient(90deg, transparent, var(--border-strong), transparent);

  /* ---- Typography ---- */
  --font-display: "Plus Jakarta Sans", "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, sans-serif;

  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.3rem;
  --fs-xl: 1.65rem;
  --fs-2xl: clamp(1.9rem, 1.6rem + 1.4vw, 2.6rem);
  --fs-3xl: clamp(2.4rem, 1.9rem + 2.2vw, 3.4rem);
  --fs-4xl: clamp(2.9rem, 2.1rem + 3.6vw, 4.6rem);

  /* ---- Spacing scale ---- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-14: 3.5rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;
  --sp-32: 8rem;

  /* ---- Radius ---- */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-xl: 30px;
  --radius-full: 999px;

  /* ---- Shadows ---- */
  --shadow-xs: 0 1px 2px rgba(10, 22, 38, 0.06);
  --shadow-sm: 0 4px 14px rgba(10, 22, 38, 0.06), 0 1px 2px rgba(10, 22, 38, 0.04);
  --shadow-md: 0 12px 32px rgba(10, 22, 38, 0.09), 0 2px 8px rgba(10, 22, 38, 0.05);
  --shadow-lg: 0 24px 64px rgba(6, 26, 56, 0.16), 0 4px 14px rgba(6, 26, 56, 0.08);
  /* Negative spread keeps the blur from "hugging" border-radius corners tighter
     than straight edges — a wide, spread-less blur reads as a dark ring right at
     rounded corners. */
  --shadow-glow: 0 10px 20px -6px rgba(0, 86, 171, 0.45);
  --shadow-glow-cyan: 0 8px 30px rgba(63, 193, 240, 0.35);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 160ms;
  --dur-base: 320ms;
  --dur-slow: 620ms;

  /* ---- Layout ---- */
  --container: 1240px;
  --header-h: 84px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0.01ms;
    --dur-base: 0.01ms;
    --dur-slow: 0.01ms;
  }
}