/* ==========================================================================
   Design Tokens — ENSEM Theme
   ========================================================================== */

:root {
  /* ── Brand Colors ─────────────────────────────────────────────────────── */
  --color-primary:       #5B1A8A;
  --color-primary-light: #7B2DB0;
  --color-primary-dark:  #3D0F5E;
  --color-primary-10:    rgba(91, 26, 138, 0.10);
  --color-primary-06:    rgba(91, 26, 138, 0.06);

  --color-accent:        #B5006A;
  --color-accent-light:  #D4007C;
  --color-accent-dark:   #8A004F;
  --color-accent-10:     rgba(181, 0, 106, 0.10);

  /* ── Neutrals ─────────────────────────────────────────────────────────── */
  --color-bg:          #FFFFFF;
  --color-surface:     #F8F4FD;
  --color-surface-2:   #EFE6F9;
  --color-text:        #1A0A2E;
  --color-text-muted:  #6B5F80;
  --color-text-light:  #9B90AA;
  --color-border:      #E2D4F0;
  --color-border-dark: #C8B8E0;
  --color-white:       #FFFFFF;

  /* ── Typography ───────────────────────────────────────────────────────── */
  --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-heading: var(--font-sans);
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;

  --text-xs:   0.75rem;   /* 12px */
  --text-sm:   0.875rem;  /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-lg:   1.125rem;  /* 18px */
  --text-xl:   1.25rem;   /* 20px */
  --text-2xl:  1.5rem;    /* 24px */
  --text-3xl:  1.875rem;  /* 30px */
  --text-4xl:  2.25rem;   /* 36px */
  --text-5xl:  3rem;      /* 48px */
  --text-6xl:  3.75rem;   /* 60px */

  --font-light:    300;
  --font-normal:   400;
  --font-medium:   500;
  --font-semibold: 600;
  --font-bold:     700;

  --leading-tight:   1.2;
  --leading-snug:    1.375;
  --leading-normal:  1.6;
  --leading-relaxed: 1.75;

  /* ── Spacing ──────────────────────────────────────────────────────────── */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* ── Border Radius ────────────────────────────────────────────────────── */
  --radius-sm:   0.25rem;
  --radius-md:   0.5rem;
  --radius-lg:   0.75rem;
  --radius-xl:   1rem;
  --radius-2xl:  1.5rem;
  --radius-full: 9999px;

  /* ── Shadows ──────────────────────────────────────────────────────────── */
  --shadow-sm: 0 1px 3px rgba(91, 26, 138, 0.06), 0 1px 2px rgba(91, 26, 138, 0.04);
  --shadow-md: 0 4px 16px rgba(91, 26, 138, 0.10), 0 2px 6px rgba(91, 26, 138, 0.06);
  --shadow-lg: 0 8px 32px rgba(91, 26, 138, 0.14), 0 4px 12px rgba(91, 26, 138, 0.08);
  --shadow-xl: 0 16px 48px rgba(91, 26, 138, 0.18), 0 8px 20px rgba(91, 26, 138, 0.10);

  /* ── Transitions ──────────────────────────────────────────────────────── */
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;
  --transition-spring: 400ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Layout ───────────────────────────────────────────────────────────── */
  --container-max:     1280px;
  --container-padding: clamp(1rem, 4vw, 2rem);
  --header-height:     72px;

  /* ── Z-index ──────────────────────────────────────────────────────────── */
  --z-base:     1;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;
  color-scheme: light;
}

[data-theme="dark"] {
  --color-bg:          #0F0A1A;
  --color-surface:     #1A1026;
  --color-surface-2:   #241530;
  --color-text:        #EDE6F7;
  --color-text-muted:  #9B8DB5;
  --color-text-light:  #6B5F80;
  --color-border:      #2E1E45;
  --color-border-dark: #3D2A5A;
  --color-white:       #FFFFFF;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.35), 0 1px 2px rgba(0,0,0,0.25);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.45), 0 2px 6px rgba(0,0,0,0.30);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.55), 0 4px 12px rgba(0,0,0,0.35);
  --shadow-xl: 0 16px 48px rgba(0,0,0,0.65), 0 8px 20px rgba(0,0,0,0.40);
  color-scheme: dark;
}

body.theme-transitions-enabled {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}