/* ==========================================================================
   Design Tokens — CortivaLab Design System
   Sleek/minimal direction: near-monochrome neutrals, one confident accent
   color, hairline borders, flat surfaces, precise engineered feel. Light
   theme is default; dark theme overrides via [data-theme="dark"].
   ========================================================================== */

:root {
  /* ---- Brand color ramp — the single accent, used sparingly ------------- */
  --violet-50:  #f2f1ff;
  --violet-100: #e6e4ff;
  --violet-200: #cdc9ff;
  --violet-300: #aca4ff;
  --violet-400: #8b7dff;
  --violet-500: #6c63ff; /* brand core, matches existing logo mark */
  --violet-600: #5847e8;
  --violet-700: #4536c2;
  --violet-800: #372b96;
  --violet-900: #241c63;

  /* ---- Neutrals — do almost all of the visual work ----------------------- */
  --slate-0:   #ffffff;
  --slate-50:  #fafafa;
  --slate-100: #f4f4f6;
  --slate-200: #e7e7ec;
  --slate-300: #d3d3db;
  --slate-400: #9a9aa8;
  --slate-500: #6f6f7d;
  --slate-600: #52525f;
  --slate-700: #3a3a45;
  --slate-800: #212127; /* charcoal, matches existing logo wordmark */
  --slate-900: #131316;
  --slate-950: #0a0a0c;

  --green-500: #10b981;
  --amber-500: #f59e0b;
  --red-500:   #ef4444;

  /* ---- Semantic tokens (light theme default) ---------------------------- */
  --color-primary: var(--violet-600); /* violet-500 reads at 4.32:1 on white — just under AA's 4.5:1 for small text; violet-600 (6.03:1) clears it everywhere this token is used as text color */
  --color-primary-strong: var(--violet-700);
  --color-primary-soft: var(--violet-100);
  --color-accent: var(--violet-500);
  --color-accent-strong: var(--violet-600);
  --color-accent-soft: var(--violet-100);

  --color-success: var(--green-500);
  --color-warning: var(--amber-500);
  --color-error: var(--red-500);

  --color-bg: var(--slate-0);
  --color-bg-subtle: var(--slate-50);
  --color-surface: #ffffff;
  --color-surface-raised: #ffffff;
  --color-border: var(--slate-200);
  --color-border-strong: var(--slate-300);

  --color-text: var(--slate-800);
  --color-text-muted: var(--slate-500);
  --color-text-faint: var(--slate-400);
  --color-text-on-primary: #ffffff;
  --color-text-inverse: #ffffff;

  --color-footer-bg: var(--slate-950);
  --color-footer-text: var(--slate-400);
  --color-footer-heading: #ffffff;

  /* ---- Surfaces -----------------------------------------------------------
     Flat, not glass. A hairline border does the separating work, not blur. */
  --glass-bg: var(--color-surface);
  --glass-bg-strong: var(--color-surface);
  --glass-border: var(--color-border);
  --glass-blur: 0px;
  --glass-blur-sm: 0px;

  --gradient-brand: linear-gradient(135deg, var(--violet-500) 0%, var(--violet-700) 100%);
  --gradient-brand-accent: linear-gradient(135deg, var(--violet-500) 0%, var(--violet-700) 100%);
  --gradient-vivid: linear-gradient(135deg, var(--violet-500) 0%, var(--violet-700) 100%);

  /* A single, quiet glow — not a multi-color wash. Used only in the hero. */
  --gradient-mesh:
    radial-gradient(48% 40% at 82% 8%, rgba(108, 99, 255, 0.08), transparent 100%),
    radial-gradient(40% 32% at 8% 92%, rgba(108, 99, 255, 0.05), transparent 100%);

  --shadow-color: 240deg 10% 20%;
  --shadow-sm: 0 1px 2px hsl(var(--shadow-color) / 0.06);
  --shadow-md: 0 4px 16px -6px hsl(var(--shadow-color) / 0.10);
  --shadow-lg: 0 12px 32px -10px hsl(var(--shadow-color) / 0.14);
  --shadow-glow: 0 8px 20px -6px rgba(108, 99, 255, 0.28);

  --focus-ring: 0 0 0 3px rgba(108, 99, 255, 0.35);

  /* ---- Typography --------------------------------------------------------*/
  --font-display: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, sans-serif;
  --font-arabic: "Tajawal", "Segoe UI", system-ui, sans-serif;

  --fs-xs:   clamp(0.78rem, 0.75rem + 0.15vw, 0.85rem);
  --fs-sm:   clamp(0.875rem, 0.83rem + 0.2vw, 0.95rem);
  --fs-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --fs-lg:   clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem);
  --fs-xl:   clamp(1.3rem, 1.18rem + 0.6vw, 1.6rem);
  --fs-2xl:  clamp(1.6rem, 1.4rem + 1vw, 2.1rem);
  --fs-3xl:  clamp(2rem, 1.65rem + 1.6vw, 2.85rem);
  --fs-4xl:  clamp(2.5rem, 1.95rem + 2.4vw, 3.75rem);
  --fs-5xl:  clamp(2.9rem, 2.2rem + 3.2vw, 4.6rem);

  --lh-tight: 1.1;
  --lh-snug: 1.3;
  --lh-normal: 1.6;
  --lh-relaxed: 1.75;

  /* ---- Spacing scale (fluid) --------------------------------------------*/
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-sm:  1rem;
  --space-md:  clamp(1.25rem, 1.1rem + 0.6vw, 1.75rem);
  --space-lg:  clamp(2rem, 1.6rem + 1.6vw, 3rem);
  --space-xl:  clamp(3rem, 2.2rem + 3.2vw, 5rem);
  --space-2xl: clamp(4rem, 2.8rem + 4.8vw, 7.5rem);

  --section-padding-y: clamp(4rem, 3rem + 4vw, 7rem);
  --container-max: 1240px;
  --container-narrow: 860px;
  --container-padding: clamp(1.25rem, 1rem + 2vw, 2.5rem);

  /* ---- Shape & motion ----------------------------------------------------*/
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-full: 999px;

  --ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-soft: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 160ms;
  --duration-base: 220ms;
  --duration-slow: 400ms;

  --z-nav: 1000;
  --z-overlay: 1100;
  --z-toast: 1200;
}

/* ---- Dark theme -----------------------------------------------------------
   Applied via [data-theme="dark"] on <html>, set synchronously by the inline
   bootstrap script (see page <head>) to avoid a flash of the wrong theme.
   Near-black, still monochrome + the one accent — not neon.
--------------------------------------------------------------------------- */
:root[data-theme="dark"] {
  --color-primary: var(--violet-400);
  --color-primary-strong: var(--violet-300);
  --color-primary-soft: rgba(139, 125, 255, 0.14);
  --color-accent: var(--violet-400);
  --color-accent-strong: var(--violet-300);
  --color-accent-soft: rgba(139, 125, 255, 0.14);

  --color-bg: var(--slate-950);
  --color-bg-subtle: #0e0e11;
  --color-surface: #17171b;
  --color-surface-raised: #1c1c21;
  --color-border: #262629;
  --color-border-strong: #34343a;

  --color-text: #f2f2f4;
  --color-text-muted: #a3a3ad;
  --color-text-faint: #6f6f79;
  --color-text-on-primary: #ffffff;

  --color-footer-bg: #050506;
  --color-footer-text: #8f8f99;
  --color-footer-heading: #ffffff;

  --glass-bg: var(--color-surface);
  --glass-bg-strong: var(--color-surface);
  --glass-border: var(--color-border);

  --gradient-mesh:
    radial-gradient(48% 40% at 82% 8%, rgba(139, 125, 255, 0.10), transparent 100%),
    radial-gradient(40% 32% at 8% 92%, rgba(139, 125, 255, 0.06), transparent 100%);

  --shadow-color: 240deg 30% 2%;
  --shadow-sm: 0 1px 2px hsl(var(--shadow-color) / 0.5);
  --shadow-md: 0 4px 16px -6px hsl(var(--shadow-color) / 0.6);
  --shadow-lg: 0 12px 32px -10px hsl(var(--shadow-color) / 0.7);
  --shadow-glow: 0 8px 20px -6px rgba(139, 125, 255, 0.3);
}

/* Respect system preference for first-time visitors with no saved choice.
   theme.js sets data-theme explicitly once a preference is known/chosen. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    color-scheme: dark;
  }
}