/**
 * Design System Settings - Design Tokens
 * ITCSS Layer 1: CSS Custom Properties
 * Based on W3C Design Tokens Community Group format
 * @version 1.0.0
 */

:root {
  /* =========================================================================
     COLOR TOKENS - Primitives
     ========================================================================= */

  /* Neutral Scale */
  --color-neutral-0: #ffffff;
  --color-neutral-50: #fafafa;
  --color-neutral-100: #f5f5f3;
  --color-neutral-200: #e5e5e5;
  --color-neutral-300: #d4d4d4;
  --color-neutral-400: #a3a3a3;
  --color-neutral-500: #767676;
  --color-neutral-600: #4d4d4d;
  --color-neutral-700: #404040;
  --color-neutral-800: #333333;
  --color-neutral-900: #1a1a1a;

  /* Brown Scale (Coffee) */
  --color-brown-50: #faf8f6;
  --color-brown-100: #f5e6d3;
  --color-brown-200: #e8d4bc;
  --color-brown-300: #d4b896;
  --color-brown-400: #b8956a;
  --color-brown-500: #8b6914;
  --color-brown-600: #6b4423;
  --color-brown-700: #5c3a1e;
  --color-brown-800: #4a2e18;
  --color-brown-900: #2c1810;

  /* Green Scale (Tea) */
  --color-green-50: #e8f5e9;
  --color-green-100: #c8e6c9;
  --color-green-200: #a5d6a7;
  --color-green-300: #81c784;
  --color-green-400: #66bb6a;
  --color-green-500: #4a7c59;
  --color-green-600: #43a047;
  --color-green-700: #388e3c;
  --color-green-800: #2e7d32;
  --color-green-900: #1b5e20;

  /* Orange Scale (Sunlight) */
  --color-orange-50: #fff3e0;
  --color-orange-100: #ffe0b2;
  --color-orange-200: #ffcc80;
  --color-orange-300: #ffb74d;
  --color-orange-400: #ffa726;
  --color-orange-500: #ff9800;
  --color-orange-600: #fb8c00;
  --color-orange-700: #f57c00;
  --color-orange-800: #ef6c00;
  --color-orange-900: #e65100;

  /* Blue Scale (Interactive/Info) */
  --color-blue-50: #e3f2fd;
  --color-blue-100: #bbdefb;
  --color-blue-200: #90caf9;
  --color-blue-300: #64b5f6;
  --color-blue-400: #42a5f5;
  --color-blue-500: #3b82f6;
  --color-blue-600: #0066cc;
  --color-blue-700: #1976d2;
  --color-blue-800: #1565c0;
  --color-blue-900: #0d47a1;

  /* Status Colors */
  --color-success: #10b981;
  --color-success-light: #ecfdf5;
  --color-error: #ef4444;
  --color-error-light: #fef2f2;
  --color-warning: #f59e0b;
  --color-warning-light: #fffbeb;
  --color-info: #3b82f6;
  --color-info-light: #eff6ff;

  /* =========================================================================
     COLOR TOKENS - Semantic
     ========================================================================= */

  /* Text Colors */
  --color-text-primary: var(--color-neutral-800);
  --color-text-secondary: var(--color-neutral-600);
  --color-text-muted: var(--color-neutral-500);
  --color-text-inverse: var(--color-neutral-0);
  --color-text-link: var(--color-blue-600);
  --color-text-link-hover: var(--color-blue-700);

  /* Background Colors */
  --color-bg-primary: var(--color-neutral-100);
  --color-bg-secondary: var(--color-neutral-0);
  --color-bg-tertiary: var(--color-neutral-50);
  --color-bg-inverse: var(--color-neutral-800);

  /* Border Colors */
  --color-border-default: rgb(0 0 0 / 12%);
  --color-border-strong: rgb(0 0 0 / 24%);
  --color-border-focus: var(--color-blue-600);

  /* Interactive Colors */
  --color-interactive-primary: var(--color-neutral-800);
  --color-interactive-primary-hover: var(--color-neutral-700);
  --color-interactive-primary-text: var(--color-neutral-0);
  --color-interactive-secondary: var(--color-neutral-100);
  --color-interactive-secondary-hover: var(--color-neutral-200);
  --color-interactive-secondary-text: var(--color-neutral-800);
  --color-interactive-accent: var(--color-blue-600);

  /* Legacy Aliases (for backwards compatibility) */
  --primary-color: var(--color-neutral-800);
  --secondary-color: var(--color-neutral-100);
  --accent-color: var(--color-blue-600);
  --text-primary: var(--color-text-primary);
  --text-secondary: var(--color-text-secondary);
  --text-muted: var(--color-text-muted);
  --text-inverse: var(--color-text-inverse);
  --bg-primary: var(--color-bg-primary);
  --bg-secondary: var(--color-bg-secondary);
  --bg-tertiary: var(--color-bg-tertiary);
  --bg-inverse: var(--color-bg-inverse);
  --border-color: var(--color-border-default);
  --card-bg: var(--color-bg-secondary);
  --card-border: var(--color-border-default);
  --card-shadow: rgb(0 0 0 / 12%);

  /* Button Colors (Legacy) */
  --btn-primary-bg: var(--color-interactive-primary);
  --btn-primary-text: var(--color-interactive-primary-text);
  --btn-primary-hover: var(--color-interactive-primary-hover);
  --btn-secondary-bg: var(--color-interactive-secondary);
  --btn-secondary-text: var(--color-interactive-secondary-text);
  --btn-secondary-hover: var(--color-interactive-secondary-hover);

  /* =========================================================================
     SPACING TOKENS
     ========================================================================= */

  /* Primitive Scale (4px base) */
  --space-0: 0;
  --space-1: 0.25rem;  /* 4px */
  --space-2: 0.5rem;   /* 8px */
  --space-3: 0.75rem;  /* 12px */
  --space-4: 1rem;     /* 16px */
  --space-5: 1.25rem;  /* 20px */
  --space-6: 1.5rem;   /* 24px */
  --space-8: 2rem;     /* 32px */
  --space-10: 2.5rem;  /* 40px */
  --space-12: 3rem;    /* 48px */
  --space-16: 4rem;    /* 64px */
  --space-20: 5rem;    /* 80px */

  /* Semantic Scale */
  --spacing-xs: var(--space-1);   /* 4px */
  --spacing-sm: var(--space-2);   /* 8px */
  --spacing-md: var(--space-4);   /* 16px */
  --spacing-lg: var(--space-6);   /* 24px */
  --spacing-xl: var(--space-8);   /* 32px */
  --spacing-xxl: var(--space-12); /* 48px */

  /* Component Spacing */
  --spacing-button-x: var(--space-6);
  --spacing-button-y: var(--space-3);
  --spacing-button-x-sm: var(--space-4);
  --spacing-button-y-sm: var(--space-2);
  --spacing-button-x-lg: var(--space-8);
  --spacing-button-y-lg: var(--space-4);
  --spacing-input-x: var(--space-3);
  --spacing-input-y: var(--space-3);
  --spacing-card: var(--space-6);
  --spacing-form-gap: var(--space-4);
  --spacing-stack: var(--space-4);
  --spacing-inline: var(--space-2);

  /* =========================================================================
     TYPOGRAPHY TOKENS
     ========================================================================= */

  /* Font Families */
  --font-family-base: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-family-mono: "SF Mono", "Courier New", Consolas, monospace;

  /* Legacy Aliases */
  --font-primary: var(--font-family-base);
  --font-mono: var(--font-family-mono);

  /* Font Sizes */
  --font-size-xs: 0.75rem;   /* 12px */
  --font-size-sm: 0.875rem;  /* 14px */
  --font-size-md: 1rem;      /* 16px */
  --font-size-lg: 1.125rem;  /* 18px */
  --font-size-xl: 1.25rem;   /* 20px */
  --font-size-2xl: 1.5rem;   /* 24px */
  --font-size-3xl: 2rem;     /* 32px */
  --font-size-4xl: 2.5rem;   /* 40px */

  /* Legacy Aliases */
  --font-size-xxl: var(--font-size-3xl);

  /* Font Weights */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Line Heights */
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;

  /* Letter Spacing */
  --letter-spacing-tight: -0.025em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.025em;

  /* =========================================================================
     BORDER TOKENS
     ========================================================================= */

  /* Border Widths */
  --border-width-none: 0;
  --border-width-thin: 1px;
  --border-width-medium: 2px;
  --border-width-thick: 4px;

  /* Border Radius */
  --radius-none: 0;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* Legacy Aliases */
  --border-radius-sm: var(--radius-sm);
  --border-radius-md: var(--radius-md);
  --border-radius-lg: var(--radius-lg);
  --border-radius-full: var(--radius-full);

  /* =========================================================================
     SHADOW TOKENS
     ========================================================================= */

  --shadow-none: none;
  --shadow-xs: 0 1px 2px rgb(0 0 0 / 5%);
  --shadow-sm: 0 2px 4px rgb(0 0 0 / 8%);
  --shadow-md: 0 4px 12px rgb(0 0 0 / 12%);
  --shadow-lg: 0 8px 24px rgb(0 0 0 / 16%);
  --shadow-xl: 0 12px 32px rgb(0 0 0 / 20%);
  --shadow-focus: 0 0 0 3px rgb(0 102 204 / 25%);
  --shadow-focus-error: 0 0 0 3px rgb(239 68 68 / 25%);

  /* =========================================================================
     MOTION TOKENS
     ========================================================================= */

  /* Durations */
  --duration-instant: 0ms;
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-slow: 350ms;
  --duration-slower: 500ms;

  /* Legacy Aliases */
  --transition-fast: var(--duration-fast) ease-in-out;
  --transition-normal: var(--duration-normal) ease-in-out;
  --transition-slow: var(--duration-slow) ease-in-out;

  /* Easing */
  --ease-linear: linear;
  --ease-in: ease-in;
  --ease-out: ease-out;
  --ease-in-out: ease-in-out;
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);

  /* =========================================================================
     Z-INDEX TOKENS
     ========================================================================= */

  --z-base: 0;
  --z-dropdown: 50;
  --z-sticky: 100;
  --z-header: 100;
  --z-overlay: 500;
  --z-modal: 1000;
  --z-toast: 1100;
  --z-tooltip: 1200;

  /* =========================================================================
     SIZE TOKENS
     ========================================================================= */

  --size-touch-target: 44px;
  --size-icon-sm: 16px;
  --size-icon-md: 20px;
  --size-icon-lg: 24px;
  --size-icon-xl: 32px;
  --size-header-height: 56px;
  --size-sidebar-width: 280px;
  --size-max-content: 1200px;

  /* =========================================================================
     BREAKPOINT TOKENS (for reference, use in media queries)
     ========================================================================= */

  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;

  /* Container Query Breakpoints */
  --container-sm: 320px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1440px;
}

/* =========================================================================
   APP-SPECIFIC THEME OVERRIDES
   ========================================================================= */

.app-coffee {
  --app-accent: var(--color-brown-600);
  --app-accent-light: var(--color-brown-400);
  --app-accent-dark: var(--color-brown-700);
  --app-bg: var(--color-brown-100);
  --app-bg-subtle: var(--color-brown-50);
}

.app-tea {
  --app-accent: var(--color-green-500);
  --app-accent-light: var(--color-green-300);
  --app-accent-dark: var(--color-green-700);
  --app-bg: var(--color-green-50);
  --app-bg-subtle: #f1f8f2;
}

.app-sunlight {
  --app-accent: var(--color-orange-400);
  --app-accent-light: var(--color-orange-200);
  --app-accent-dark: var(--color-orange-600);
  --app-bg: var(--color-orange-50);
  --app-bg-subtle: #fffbf5;
}

.app-disc {
  --app-accent: var(--color-blue-700);
  --app-accent-light: var(--color-blue-400);
  --app-accent-dark: var(--color-blue-800);
  --app-bg: var(--color-blue-50);
  --app-bg-subtle: #f0f7ff;
}

.app-datacenter {
  --app-accent: #00897b;
  --app-accent-light: #4db6ac;
  --app-accent-dark: #00695c;
  --app-bg: #e0f2f1;
  --app-bg-subtle: #f0f9f8;
}

.app-strong {
  --app-accent: #d32f2f;
  --app-accent-light: #ef5350;
  --app-accent-dark: #c62828;
  --app-bg: #ffebee;
  --app-bg-subtle: #fff5f5;
}

/* =========================================================================
   DARK THEME OVERRIDES
   ========================================================================= */

[data-theme="dark"],
.dark-theme {
  --color-text-primary: #f5f5f5;
  --color-text-secondary: #a3a3a3;
  --color-text-muted: #737373;
  --color-bg-primary: #1a1a1a;
  --color-bg-secondary: #262626;
  --color-bg-tertiary: #333333;
  --color-border-default: rgb(255 255 255 / 12%);
  --color-border-strong: rgb(255 255 255 / 24%);

  /* Update legacy aliases */
  --text-primary: var(--color-text-primary);
  --text-secondary: var(--color-text-secondary);
  --text-muted: var(--color-text-muted);
  --bg-primary: var(--color-bg-primary);
  --bg-secondary: var(--color-bg-secondary);
  --bg-tertiary: var(--color-bg-tertiary);
  --border-color: var(--color-border-default);
  --card-bg: var(--color-bg-secondary);
  --card-border: var(--color-border-default);
  --card-shadow: rgb(0 0 0 / 30%);
}