/* ==========================================
   DineDesk Design Token System
   Theme: DineDesk Figma Purple/Lavender System
   (Authoritative Figma Node 21:14281 Specification)
   ========================================== */

/* ============================================
   LIGHT THEME (default) - Figma Purple/Lavender System
   ============================================ */
:root,
[data-theme="light"] {
  /* ---- Brand / Primary (Figma Purple/Indigo) ---- */
  --dd-primary: #4F46E5;
  --dd-primary-hover: #4338CA;
  --dd-primary-soft: #E3DFFF;
  --dd-primary-lighter: #E3DFFF;
  --dd-primary-light: #6366F1;
  --dd-primary-dark: #150066;
  --dd-primary-text: #150066;

  /* ---- Backgrounds & Solid Surfaces ---- */
  --dd-bg: #FDF7FF;
  --dd-sidebar: #F6F1FA;
  --dd-surface: #FFFFFF;
  --dd-surface-hover: #F6F1FA;
  --dd-surface-muted: #EAE5EE;
  --surface-primary: #FFFFFF;
  --surface-secondary: #FDF7FF;
  --surface-elevated: #FFFFFF;

  /* ---- Selective Glassmorphism Tokens ---- */
  --glass-bg: rgba(255, 255, 255, 0.75);
  --glass-bg-strong: rgba(253, 247, 255, 0.9);
  --glass-border: rgba(228, 223, 232, 0.8);
  --glass-border-subtle: rgba(228, 223, 232, 0.5);
  --glass-shadow: 0 4px 20px -2px rgba(79, 70, 229, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.8);
  --glass-blur: 16px;
  --glass-blur-lg: 24px;
  --dd-surface-glass: var(--glass-bg);
  --dd-surface-glass-strong: var(--glass-bg-strong);
  --dd-border-glass: var(--glass-border);
  --dd-shadow-glass: var(--glass-shadow);
  --dd-glass-blur: var(--glass-blur);
  --dd-glass-blur-lg: var(--glass-blur-lg);

  /* ---- Text & Typography ---- */
  --dd-text: #1B1B21;
  --dd-text-secondary: #47464F;
  --dd-text-muted: #78767F;
  --dd-text-inverse: #FFFFFF;
  --dd-text-link: #4F46E5;

  /* ---- Borders & Separators ---- */
  --dd-border: #E4DFE8;
  --dd-border-strong: #C8C5D0;
  --dd-border-light: #F1ECF5;

  /* ---- Semantic Status (Universal Meaning) ---- */
  --dd-success: #16A34A;
  --dd-success-soft: #F0FDF4;
  --dd-success-border: #BBF7D0;
  --dd-success-text: #166534;

  --dd-warning: #D97706;
  --dd-warning-soft: #FFFBEB;
  --dd-warning-border: #FDE68A;
  --dd-warning-text: #92400E;

  --dd-error: #DC2626;
  --dd-error-soft: #FEF2F2;
  --dd-error-border: #FECACA;
  --dd-error-text: #991B1B;

  --dd-info: #2563EB;
  --dd-info-soft: #EFF6FF;
  --dd-info-border: #BFDBFE;
  --dd-info-text: #1D4ED8;

  /* ---- Sidebar (Figma Purple / Lavender Theme) ---- */
  --dd-sidebar: #F6F1FA;
  --dd-sidebar-hover: #ECE6F0;
  --dd-sidebar-active: #E3DFFF;
  --dd-sidebar-text: #47464F;
  --dd-sidebar-text-active: #150066;
  --dd-sidebar-border: #E4DFE8;
  --dd-sidebar-section: #78767F;

  /* ---- Refined Shadows ---- */
  --dd-shadow-xs: 0 1px 2px rgba(27, 27, 33, 0.04);
  --dd-shadow-sm: 0 1px 3px rgba(27, 27, 33, 0.05), 0 1px 2px rgba(27, 27, 33, 0.03);
  --dd-shadow-md: 0 4px 6px -1px rgba(27, 27, 33, 0.06), 0 2px 4px -1px rgba(27, 27, 33, 0.03);
  --dd-shadow-lg: 0 10px 15px -3px rgba(27, 27, 33, 0.06), 0 4px 6px -2px rgba(27, 27, 33, 0.03);
  --dd-shadow-xl: 0 20px 25px -5px rgba(27, 27, 33, 0.08), 0 10px 10px -5px rgba(27, 27, 33, 0.03);
  --dd-shadow-dropdown: 0 4px 20px rgba(27, 27, 33, 0.1);

  /* ---- Chart Colors ---- */
  --dd-chart-1: #4F46E5;
  --dd-chart-2: #2563EB;
  --dd-chart-3: #D97706;
  --dd-chart-4: #DC2626;
  --dd-chart-5: #16A34A;
  --dd-chart-grid: rgba(27, 27, 33, 0.05);
  --dd-chart-text: #78767F;
}

/* ============================================
   DARK THEME
   ============================================ */
[data-theme="dark"] {
  /* ---- Brand / Primary ---- */
  --dd-primary: #818CF8;
  --dd-primary-hover: #A5B4FC;
  --dd-primary-soft: rgba(129, 140, 248, 0.16);
  --dd-primary-lighter: rgba(129, 140, 248, 0.22);
  --dd-primary-light: #A5B4FC;
  --dd-primary-dark: #6366F1;
  --dd-primary-text: #EEF2FF;

  /* ---- Backgrounds & Solid Surfaces ---- */
  --dd-bg: #141218;
  --dd-surface: #1D1B20;
  --dd-surface-hover: #2B2930;
  --dd-surface-muted: #211F26;
  --surface-primary: #1D1B20;
  --surface-secondary: #141218;
  --surface-elevated: #2B2930;

  /* ---- Selective Glassmorphism Tokens ---- */
  --glass-bg: rgba(29, 27, 32, 0.72);
  --glass-bg-strong: rgba(29, 27, 32, 0.88);
  --glass-border: rgba(255, 255, 255, 0.09);
  --glass-border-subtle: rgba(255, 255, 255, 0.05);
  --glass-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --glass-blur: 16px;
  --glass-blur-lg: 24px;
  --dd-surface-glass: var(--glass-bg);
  --dd-surface-glass-strong: var(--glass-bg-strong);
  --dd-border-glass: var(--glass-border);
  --dd-shadow-glass: var(--glass-shadow);
  --dd-glass-blur: var(--glass-blur);
  --dd-glass-blur-lg: var(--glass-blur-lg);

  /* ---- Text & Typography ---- */
  --dd-text: #E6E1E5;
  --dd-text-secondary: #CAC4D0;
  --dd-text-muted: #938F99;
  --dd-text-inverse: #1D1B20;
  --dd-text-link: #818CF8;

  /* ---- Borders & Separators ---- */
  --dd-border: #49454F;
  --dd-border-strong: #605D66;
  --dd-border-light: #332F37;

  /* ---- Semantic Status ---- */
  --dd-success: #22C55E;
  --dd-success-soft: rgba(34, 197, 94, 0.12);
  --dd-success-border: rgba(34, 197, 94, 0.25);
  --dd-success-text: #86EFAC;

  --dd-warning: #F59E0B;
  --dd-warning-soft: rgba(245, 158, 11, 0.12);
  --dd-warning-border: rgba(245, 158, 11, 0.25);
  --dd-warning-text: #FDE68A;

  --dd-error: #EF4444;
  --dd-error-soft: rgba(239, 68, 68, 0.12);
  --dd-error-border: rgba(239, 68, 68, 0.25);
  --dd-error-text: #FCA5A5;

  --dd-info: #38BDF8;
  --dd-info-soft: rgba(56, 189, 248, 0.12);
  --dd-info-border: rgba(56, 189, 248, 0.25);
  --dd-info-text: #7DD3FC;

  /* ---- Sidebar ---- */
  --dd-sidebar: #19171C;
  --dd-sidebar-hover: #26242B;
  --dd-sidebar-active: rgba(129, 140, 248, 0.2);
  --dd-sidebar-text: #CAC4D0;
  --dd-sidebar-text-active: #EEF2FF;
  --dd-sidebar-border: #332F37;
  --dd-sidebar-section: #938F99;
}

/* ============================================
   THEME-INDEPENDENT TOKENS
   ============================================ */
:root {
  /* ---- Typography ---- */
  --dd-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --dd-font-mono: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;

  --dd-text-xs: 11px;
  --dd-text-sm: 12px;
  --dd-text-base: 13.5px;
  --dd-text-md: 15px;
  --dd-text-lg: 17px;
  --dd-text-xl: 20px;
  --dd-text-2xl: 24px;
  --dd-text-3xl: 28px;

  --dd-weight-regular: 400;
  --dd-weight-medium: 500;
  --dd-weight-semibold: 600;
  --dd-weight-bold: 700;

  --dd-leading-tight: 1.2;
  --dd-leading-normal: 1.45;
  --dd-leading-relaxed: 1.6;

  /* ---- Disciplined Spacing Scale ---- */
  --dd-space-0: 0;
  --dd-space-px: 1px;
  --dd-space-0-5: 2px;
  --dd-space-1: 4px;
  --dd-space-1-5: 6px;
  --dd-space-2: 8px;
  --dd-space-2-5: 10px;
  --dd-space-3: 12px;
  --dd-space-3-5: 14px;
  --dd-space-4: 16px;
  --dd-space-5: 20px;
  --dd-space-6: 24px;
  --dd-space-8: 32px;
  --dd-space-10: 40px;
  --dd-space-12: 48px;
  --dd-space-16: 64px;

  /* ---- Disciplined Border Radii (4-6px controls, 6-10px cards, 8-12px dialogs) ---- */
  --dd-radius-sm: 4px;
  --dd-radius-md: 6px;
  --dd-radius-lg: 8px;
  --dd-radius-xl: 10px;
  --dd-radius-2xl: 12px;
  --dd-radius-full: 9999px;

  /* ---- Z-Index ---- */
  --dd-z-dropdown: 100;
  --dd-z-sticky: 200;
  --dd-z-sidebar: 300;
  --dd-z-overlay: 400;
  --dd-z-drawer: 450;
  --dd-z-modal: 500;
  --dd-z-toast: 600;
  --dd-z-tooltip: 700;

  /* ---- Transitions ---- */
  --dd-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dd-duration-fast: 150ms;
  --dd-duration-base: 200ms;
  --dd-duration-slow: 250ms;
  --dd-transition-fast: 150ms cubic-bezier(0.16, 1, 0.3, 1);
  --dd-transition-base: 200ms cubic-bezier(0.16, 1, 0.3, 1);
  --dd-transition-slow: 250ms cubic-bezier(0.16, 1, 0.3, 1);

  /* ---- Layout ---- */
  --dd-sidebar-width: 248px;
  --dd-sidebar-collapsed: 68px;
  --dd-header-height: 56px;
  --dd-content-max: 1440px;

  /* =========================================
     LEGACY ALIASES (Full Backward-Compatibility)
     ========================================= */
  --color-primary: var(--dd-primary);
  --color-primary-light: var(--dd-primary-light);
  --color-primary-lighter: var(--dd-primary-lighter);
  --color-primary-dark: var(--dd-primary-dark);
  --color-primary-bg: var(--dd-primary-soft);

  --color-background: var(--dd-bg);
  --color-surface: var(--dd-surface);
  --color-surface-hover: var(--dd-surface-hover);
  --color-surface-muted: var(--dd-surface-muted);
  --color-border: var(--dd-border);
  --color-border-light: var(--dd-border-light);

  --color-text-primary: var(--dd-text);
  --color-text-secondary: var(--dd-text-secondary);
  --color-text-tertiary: var(--dd-text-muted);
  --color-text-inverse: var(--dd-text-inverse);
  --color-text-link: var(--dd-text-link);

  --color-success: var(--dd-success);
  --color-success-bg: var(--dd-success-soft);
  --color-success-border: var(--dd-success-border);
  --color-warning: var(--dd-warning);
  --color-warning-bg: var(--dd-warning-soft);
  --color-warning-border: var(--dd-warning-border);
  --color-error: var(--dd-error);
  --color-error-bg: var(--dd-error-soft);
  --color-error-border: var(--dd-error-border);
  --color-info: var(--dd-info);
  --color-info-bg: var(--dd-info-soft);
  --color-info-border: var(--dd-info-border);

  --color-sidebar: var(--dd-sidebar);
  --color-sidebar-hover: var(--dd-sidebar-hover);
  --color-sidebar-active: var(--dd-sidebar-active);
  --color-sidebar-text: var(--dd-sidebar-text);
  --color-sidebar-text-active: var(--dd-sidebar-text-active);
  --color-sidebar-border: var(--dd-sidebar-border);

  --font-family: var(--dd-font);
  --font-size-xs: var(--dd-text-xs);
  --font-size-sm: var(--dd-text-sm);
  --font-size-base: var(--dd-text-base);
  --font-size-md: var(--dd-text-md);
  --font-size-lg: var(--dd-text-lg);
  --font-size-xl: var(--dd-text-xl);
  --font-size-2xl: var(--dd-text-2xl);
  --font-size-3xl: var(--dd-text-3xl);

  --font-weight-regular: var(--dd-weight-regular);
  --font-weight-medium: var(--dd-weight-medium);
  --font-weight-semibold: var(--dd-weight-semibold);
  --font-weight-bold: var(--dd-weight-bold);

  --line-height-tight: var(--dd-leading-tight);
  --line-height-normal: var(--dd-leading-normal);
  --line-height-relaxed: var(--dd-leading-relaxed);

  --space-0: 0;
  --space-px: 1px;
  --space-0-5: var(--dd-space-0-5);
  --space-1: var(--dd-space-1);
  --space-1-5: var(--dd-space-1-5);
  --space-2: var(--dd-space-2);
  --space-2-5: 10px;
  --space-3: var(--dd-space-3);
  --space-4: var(--dd-space-4);
  --space-5: var(--dd-space-5);
  --space-6: var(--dd-space-6);
  --space-8: var(--dd-space-8);
  --space-10: var(--dd-space-10);
  --space-12: var(--dd-space-12);
  --space-16: var(--dd-space-16);

  --radius-sm: var(--dd-radius-sm);
  --radius-md: var(--dd-radius-md);
  --radius-lg: var(--dd-radius-lg);
  --radius-xl: var(--dd-radius-xl);
  --radius-2xl: var(--dd-radius-2xl);
  --radius-full: var(--dd-radius-full);

  --shadow-xs: var(--dd-shadow-xs);
  --shadow-sm: var(--dd-shadow-sm);
  --shadow-md: var(--dd-shadow-md);
  --shadow-lg: var(--dd-shadow-lg);
  --shadow-xl: var(--dd-shadow-xl);
  --shadow-dropdown: var(--dd-shadow-dropdown);

  --z-dropdown: var(--dd-z-dropdown);
  --z-sticky: var(--dd-z-sticky);
  --z-sidebar: var(--dd-z-sidebar);
  --z-overlay: var(--dd-z-overlay);
  --z-drawer: var(--dd-z-drawer);
  --z-modal: var(--dd-z-modal);
  --z-toast: var(--dd-z-toast);
  --z-tooltip: var(--dd-z-tooltip);

  --transition-fast: var(--dd-transition-fast);
  --transition-base: var(--dd-transition-base);
  --transition-slow: var(--dd-transition-slow);
  --transition-sidebar: 200ms cubic-bezier(0.16, 1, 0.3, 1);

  --sidebar-width: var(--dd-sidebar-width);
  --sidebar-collapsed-width: var(--dd-sidebar-collapsed);
  --header-height: var(--dd-header-height);
  --content-max-width: var(--dd-content-max);
}

/* ============================================
   ACCESSIBILITY — reduced motion
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dd-transition-fast: 0ms;
    --dd-transition-base: 0ms;
    --dd-transition-slow: 0ms;
    --dd-duration-fast: 0ms;
    --dd-duration-base: 0ms;
    --dd-duration-slow: 0ms;
    --transition-fast: 0ms;
    --transition-base: 0ms;
    --transition-slow: 0ms;
    --transition-sidebar: 0ms;
  }
}