/* 
 * Design Tokens & Variables
 * Naming Convention: --category-property-modifier
 */

:root {
  /* =========================================
     Color Primitives (HSL)
     ========================================= */

  /* 
     User Palette:
     Base (Grundfarbe): #1B233B -> 225, 37%, 17%
     Accent (Akzent): #30BEC0 -> 181, 60%, 47%
     Cream: #F6E7BC -> 44, 75%, 85%
  */

  /* Brand Colors */
  --color-brand-deep: 225, 37%, 17%;
  /* #1B233B */
  --color-brand-main: 181, 60%, 47%;
  /* #30BEC0 */
  --color-brand-light: 181, 60%, 55%;
  /* Lighter #30BEC0 */
  --color-accent-cream: 44, 75%, 85%;
  /* #F6E7BC */

  /* Neutrals (Cool gray biased towards blue) */
  --gray-0: 0, 0%, 96%;
  --gray-50: 210, 20%, 93%;
  --gray-100: 210, 20%, 90%;
  --gray-200: 214, 15%, 86%;
  --gray-300: 213, 15%, 84%;
  --gray-400: 215, 15%, 65%;
  --gray-500: 215, 15%, 47%;
  --gray-600: 215, 20%, 35%;
  --gray-700: 220, 30%, 28%;
  /* Biased towards deep blue */
  --gray-800: 220, 40%, 20%;
  --gray-900: 220, 40%, 15%;
  --gray-950: 220, 40%, 10%;
  --gray-1000: 220, 40%, 7%;

  /* Mapping to Functional System */

  /* Primary Range */
  --primary-50: var(--color-brand-light);
  /* Using light cyan for lightest backgrounds if needed, or adjust opacity */
  --primary-100: 188, 91%, 90%;
  --primary-400: var(--color-brand-light);
  --primary-500: var(--color-brand-main);
  --primary-600: 196, 91%, 35%;
  /* Darker version of main */
  --primary-900: var(--color-brand-deep);

  /* Accent */
  --accent-cream: var(--color-accent-cream);

  /* Functional Colors */
  --color-success: 142, 71%, 45%;
  --color-warning: 38, 92%, 50%;
  --color-error: 0, 84%, 60%;

  /* =========================================
     Semantic Colors
     ========================================= */

  /* Backgrounds */
  --bg-page: hsl(var(--gray-0));
  --bg-surface: hsl(var(--gray-50));
  --bg-surface-elevated: hsl(var(--gray-0));
  --bg-surface-glass: hsla(var(--gray-0), 0.7);

  /* Text */
  --text-primary: #12182b; /* Slightly darker than brand-deep for max contrast */
  --text-secondary: #4a5578; /* Higher contrast blue-gray */
  --text-tertiary: #6b7280;
  --text-inverse: hsl(var(--gray-0));
  --text-brand: hsl(var(--primary-500));

  /* Borders */
  --border-light: hsla(var(--color-brand-deep), 0.08);
  --border-medium: hsla(var(--color-brand-deep), 0.12);
  --border-focus: hsla(var(--primary-500), 0.5);

  /* Buttons & Interactives */
  --action-primary-bg: hsl(var(--color-brand-main));
  --action-primary-text: hsl(var(--gray-0));
  --action-primary-hover: hsl(var(--primary-600));
  /* Darker teal on hover (not dark navy) */

  --action-secondary-bg: transparent;
  --action-secondary-text: hsl(var(--color-brand-deep));
  --action-secondary-border: hsla(var(--color-brand-deep), 0.1);
  --action-secondary-hover-bg: hsla(var(--color-brand-main), 0.05);

  /* =========================================
     Typography
     ========================================= */

  /* Families */
  --font-sans: 'Montserrat', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Montserrat', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Scale */
  --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;

  /* Line Heights & Tracking */
  --leading-none: 1;
  --leading-tight: 1.2;
  --leading-normal: 1.5;
  --leading-slack: 1.7;
  --tracking-tight: -0.02em;
  --tracking-normal: 0em;
  --tracking-wide: 0.02em;

  /* =========================================
     Spacing & Layout
     ========================================= */

  --space-05: 0.125rem;
  --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;
  --space-32: 8rem;

  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1200px;
  --container-2xl: 1400px;

  /* =========================================
     Effects
     ========================================= */

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-full: 9999px;

  --shadow-xs: 0 1px 2px hsla(var(--color-brand-deep), 0.05);
  --shadow-sm: 0 1px 3px hsla(var(--color-brand-deep), 0.1), 0 1px 2px hsla(var(--color-brand-deep), 0.06);
  --shadow-md: 0 4px 6px -1px hsla(var(--color-brand-deep), 0.1), 0 2px 4px -1px hsla(var(--color-brand-deep), 0.06);
  --shadow-lg: 0 10px 15px -3px hsla(var(--color-brand-deep), 0.1), 0 4px 6px -2px hsla(var(--color-brand-deep), 0.05);
  --shadow-xl: 0 20px 25px -5px hsla(var(--color-brand-deep), 0.1), 0 10px 10px -5px hsla(var(--color-brand-deep), 0.04);

  --duration-fast: 150ms;
  --duration-normal: 0.3s;
  --duration-slow: 0.5s;

  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --ease-squish: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Grid Layout */
  --grid-columns: 12;
  --grid-gutter: var(--space-6);
}

/* Dark Mode Overrides */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg-page: hsl(var(--gray-950));
    --bg-surface: hsl(var(--gray-900));
    --bg-surface-elevated: hsl(var(--gray-800));
    --bg-surface-glass: hsla(var(--gray-900), 0.7);

    --text-primary: hsl(var(--gray-0));
    /* White text on dark */
    --text-secondary: hsl(var(--gray-200));
    --text-tertiary: hsl(var(--gray-400));
    --text-inverse: hsl(var(--gray-950));

    --border-light: hsla(var(--gray-0), 0.1);
    --border-medium: hsla(var(--gray-0), 0.15);

    --action-primary-bg: hsl(var(--primary-500));
    /* Bright Blue on Dark */
    --action-primary-text: hsl(var(--gray-0));
    --action-primary-hover: hsl(var(--primary-400));

    --action-secondary-text: hsl(var(--gray-100));
    --action-secondary-border: hsla(var(--gray-0), 0.2);
    --action-secondary-hover-bg: hsla(var(--gray-0), 0.1);

    --shadow-md: 0 4px 6px -1px hsla(0, 0%, 0%, 0.3), 0 2px 4px -1px hsla(0, 0%, 0%, 0.15);
  }
}

:root[data-theme="dark"] {
  --bg-page: hsl(var(--gray-950));
  --bg-surface: hsl(var(--gray-900));
  --bg-surface-elevated: hsl(var(--gray-800));
  --bg-surface-glass: hsla(var(--gray-900), 0.7);

  --text-primary: hsl(var(--gray-0));
  /* White text on dark */
  --text-secondary: hsl(var(--gray-200));
  --text-tertiary: hsl(var(--gray-400));
  --text-inverse: hsl(var(--gray-950));

  --border-light: hsla(var(--gray-0), 0.1);
  --border-medium: hsla(var(--gray-0), 0.15);

  --action-primary-bg: hsl(var(--primary-500));
  /* Bright Blue on Dark */
  --action-primary-text: hsl(var(--gray-0));
  --action-primary-hover: hsl(var(--primary-400));

  --action-secondary-text: hsl(var(--gray-100));
  --action-secondary-border: hsla(var(--gray-0), 0.2);
  --action-secondary-hover-bg: hsla(var(--gray-0), 0.1);

  --shadow-md: 0 4px 6px -1px hsla(0, 0%, 0%, 0.3), 0 2px 4px -1px hsla(0, 0%, 0%, 0.15);
}