/* IDEALYS CSS VARIABLES 
   Based on design-system.json
*/

:root {
  /* COLORS */
  --c-primary-main: #0F172A;
  --c-primary-light: #1E293B;
  --c-primary-dark: #020617;
  --c-primary-contrast: #FFFFFF;

  --c-accent-main: #06B6D4;
  --c-accent-hover: #0891B2;
  --c-accent-contrast: #FFFFFF;

  --c-neutral-50: #F8FAFC;
  --c-neutral-100: #F1F5F9;
  --c-neutral-200: #E2E8F0;
  --c-neutral-500: #64748B;
  --c-neutral-800: #1E293B;
  --c-neutral-900: #0F172A;

  --c-semantic-success: #10B981;

  /* TYPOGRAPHY */
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* SPACING */
  --sp-1: 0.25rem;
  /* 4px */
  --sp-2: 0.5rem;
  /* 8px */
  --sp-3: 0.75rem;
  /* 12px */
  --sp-4: 1rem;
  /* 16px */
  --sp-6: 1.5rem;
  /* 24px */
  --sp-8: 2rem;
  /* 32px */
  --sp-12: 3rem;
  /* 48px */
  --sp-16: 4rem;
  /* 64px */
  --sp-24: 6rem;
  /* 96px */

  /* RADIUS */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 9999px;

  /* SHADOWS */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);

  /* LAYOUT */
  --container-width: 1280px;
  --header-height: 80px;

  /* ----------------------------------------------------
     SEMANTIC THEME TOKENS (DEFAULT = DARK MODE)
     ---------------------------------------------------- */

  /* Backgrounds */
  --bg-body: var(--c-primary-main);
  /* Deep Blue/Black #0F172A */
  --bg-card: var(--c-primary-light);
  /* Slate-800 #1E293B */
  --bg-surface: var(--c-primary-light);
  /* For headers/navs */
  --bg-section-alt: var(--c-primary-dark);
  /* Even darker for contrast #020617 */

  /* Text */
  --text-main: var(--c-neutral-50);
  /* White/Off-white */
  --text-muted: #94A3B8;
  /* Slate-400 (Lighter than 500 for dark bg) */
  --text-inverse: var(--c-primary-main);
  /* For buttons that turn light */

  /* Borders */
  --border-color: #334155;
  /* Slate-700 */

  /* Components */
  --nav-bg: rgba(15, 23, 42, 0.9);
  /* Translucent Dark */
}

/* ----------------------------------------------------
   LIGHT MODE OVERRIDES
   ---------------------------------------------------- */
[data-theme="light"] {
  /* Backgrounds */
  --bg-body: var(--c-neutral-50);
  --bg-card: #FFFFFF;
  --bg-surface: #FFFFFF;
  --bg-section-alt: #FFFFFF;

  /* Text */
  --text-main: var(--c-neutral-900);
  --text-muted: var(--c-neutral-500);
  --text-inverse: #FFFFFF;

  /* Borders */
  --border-color: var(--c-neutral-200);

  /* Components */
  --nav-bg: rgba(255, 255, 255, 0.9);
}