/* ============================================================
   CSS Variables / Design Tokens
   5 Minute Mock — Refined Theme System
   Light & Dark Mode with Distinctive Typography
   ============================================================ */

/* Typography - Distinctive font choices */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=Space+Mono:wght@400;700&display=swap');

/* ============================================================
   Light Theme (Default)
   Warm, inviting, professional
   ============================================================ */
:root {
  /* Color Mode Flag */
  --color-scheme: light;

  /* ========== Core Palette ========== */

  /* Primary - Refined Teal with warmth */
  --color-primary: #0D9488;
  --color-primary-hover: #0F766E;
  --color-primary-light: #14B8A6;
  --color-primary-muted: #5EEAD4;
  --color-primary-bg: #CCFBF1;
  --color-primary-subtle: #F0FDFA;

  /* Surface Colors - Warm white spectrum */
  --color-bg: #FFFFFF;
  --color-bg-page: #FAFAF9;
  --color-bg-elevated: #FFFFFF;
  --color-bg-card: #FFFFFF;
  --color-bg-hover: #F5F5F4;
  --color-bg-active: #F0FDFA;
  --color-bg-muted: #F5F5F4;
  --color-bg-subtle: #FAFAF9;
  --color-bg-inset: #F5F5F4;

  /* Text Colors - Deep, readable slate */
  --color-text: #1C1917;
  --color-text-secondary: #57534E;
  --color-text-muted: #78716C;
  --color-text-subtle: #A8A29E;
  --color-text-on-primary: #FFFFFF;
  --color-text-inverse: #FAFAF9;

  /* Border Colors */
  --color-border: #E7E5E4;
  --color-border-light: #F5F5F4;
  --color-border-hover: #D6D3D1;
  --color-border-focus: var(--color-primary);

  /* Legacy aliases (backward compatibility) */
  --color-text-main: var(--color-text);
  --color-secondary: var(--color-text-secondary);
  --color-bg-light: var(--color-bg-page);
  --color-accent-cream: #FEF3C7;
  --color-accent-beige: #FDE68A;

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

  /* Success - Emerald */
  --color-success: #059669;
  --color-success-hover: #047857;
  --color-success-bg: #D1FAE5;
  --color-success-text: #065F46;

  /* Warning - Amber */
  --color-warning: #D97706;
  --color-warning-hover: #B45309;
  --color-warning-bg: #FEF3C7;
  --color-warning-text: #92400E;

  /* Danger - Rose */
  --color-danger: #E11D48;
  --color-danger-hover: #BE123C;
  --color-danger-bg: #FFE4E6;
  --color-danger-text: #9F1239;

  /* Info - Sky */
  --color-info: #0284C7;
  --color-info-hover: #0369A1;
  --color-info-bg: #E0F2FE;
  --color-info-text: #075985;

  /* ========== Typography ========== */
  --font-sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'Space Mono', 'JetBrains Mono', 'Fira Code', monospace;
  --font-main: var(--font-sans);

  /* Type Scale - Refined proportions */
  --text-xs: 11px;
  --text-sm: 13px;
  --text-base: 14px;
  --text-lg: 16px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 30px;
  --text-4xl: 36px;

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

  /* Line Heights */
  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;

  /* Letter Spacing */
  --tracking-tighter: -0.03em;
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.025em;
  --tracking-wider: 0.05em;

  /* ========== Spacing ========== */
  --space-0: 0;
  --space-px: 1px;
  --space-0-5: 2px;
  --space-1: 4px;
  --space-1-5: 6px;
  --space-2: 8px;
  --space-2-5: 10px;
  --space-3: 12px;
  --space-3-5: 14px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-9: 36px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

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

  /* ========== Shadows - Layered depth ========== */
  --shadow-xs: 0 1px 2px rgba(28, 25, 23, 0.04);
  --shadow-sm: 0 1px 3px rgba(28, 25, 23, 0.06), 0 1px 2px rgba(28, 25, 23, 0.04);
  --shadow-md: 0 4px 6px -1px rgba(28, 25, 23, 0.07), 0 2px 4px -2px rgba(28, 25, 23, 0.04);
  --shadow-lg: 0 10px 15px -3px rgba(28, 25, 23, 0.08), 0 4px 6px -4px rgba(28, 25, 23, 0.04);
  --shadow-xl: 0 20px 25px -5px rgba(28, 25, 23, 0.1), 0 8px 10px -6px rgba(28, 25, 23, 0.04);
  --shadow-2xl: 0 25px 50px -12px rgba(28, 25, 23, 0.2);

  /* Colored Shadows */
  --shadow-primary: 0 4px 14px -2px rgba(13, 148, 136, 0.25);
  --shadow-success: 0 4px 14px -2px rgba(5, 150, 105, 0.25);
  --shadow-danger: 0 4px 14px -2px rgba(225, 29, 72, 0.25);

  /* Focus Shadows */
  --shadow-focus: 0 0 0 3px rgba(13, 148, 136, 0.2);
  --shadow-focus-danger: 0 0 0 3px rgba(225, 29, 72, 0.2);

  /* Inset Shadows */
  --shadow-inset: inset 0 2px 4px rgba(28, 25, 23, 0.04);

  /* ========== Transitions ========== */
  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);

  --transition-fast: 100ms var(--ease-default);
  --transition-base: 150ms var(--ease-default);
  --transition-slow: 250ms var(--ease-default);
  --transition-slower: 350ms var(--ease-default);
  --transition-bounce: 500ms var(--ease-bounce);
  --transition-theme: 300ms var(--ease-out);

  /* ========== Layout ========== */
  --sidebar-width: 240px;
  --sidebar-width-collapsed: 64px;
  --header-height: 56px;
  --container-max: 1280px;

  /* ========== Icons ========== */
  --icon-xs: 14px;
  --icon-sm: 16px;
  --icon-md: 18px;
  --icon-lg: 24px;
  --icon-xl: 32px;

  /* ========== Z-Index Scale ========== */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-overlay: 400;
  --z-modal: 500;
  --z-popover: 600;
  --z-tooltip: 700;

  /* ========== Breakpoints (reference only) ========== */
  --breakpoint-sm: 480px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;

  /* ========== Touch Targets ========== */
  --touch-target-min: 44px;

  /* ========== Mobile Spacing ========== */
  --mobile-padding: 16px;
  --mobile-gap: 12px;

  /* ========== Overlay / Backdrop ========== */
  --overlay-bg: rgba(28, 25, 23, 0.5);
  --backdrop-blur: blur(4px);
}

/* ============================================================
   Dark Theme
   Sophisticated, deep tones with warm accents
   ============================================================ */
[data-theme="dark"] {
  --color-scheme: dark;

  /* ========== Core Palette ========== */

  /* Primary - Brighter teal for dark mode visibility */
  --color-primary: #2DD4BF;
  --color-primary-hover: #5EEAD4;
  --color-primary-light: #99F6E4;
  --color-primary-muted: #14B8A6;
  --color-primary-bg: rgba(45, 212, 191, 0.15);
  --color-primary-subtle: rgba(45, 212, 191, 0.08);

  /* Surface Colors - Deep charcoal with warmth */
  --color-bg: #171412;
  --color-bg-page: #0F0D0B;
  --color-bg-elevated: #1F1C19;
  --color-bg-card: #1F1C19;
  --color-bg-hover: #292524;
  --color-bg-active: rgba(45, 212, 191, 0.12);
  --color-bg-muted: #1C1917;
  --color-bg-subtle: #171412;
  --color-bg-inset: #0F0D0B;

  /* Text Colors - Warm off-white spectrum */
  --color-text: #FAFAF9;
  --color-text-secondary: #D6D3D1;
  --color-text-muted: #A8A29E;
  --color-text-subtle: #78716C;
  --color-text-on-primary: #0F0D0B;
  --color-text-inverse: #1C1917;

  /* Border Colors - Subtle warm grays */
  --color-border: #292524;
  --color-border-light: #1C1917;
  --color-border-hover: #44403C;
  --color-border-focus: var(--color-primary);

  /* Legacy aliases */
  --color-text-main: var(--color-text);
  --color-secondary: var(--color-text-secondary);
  --color-bg-light: var(--color-bg-page);
  --color-accent-cream: rgba(254, 243, 199, 0.15);
  --color-accent-beige: rgba(253, 230, 138, 0.2);

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

  /* Success - Lighter emerald */
  --color-success: #34D399;
  --color-success-hover: #6EE7B7;
  --color-success-bg: rgba(52, 211, 153, 0.15);
  --color-success-text: #6EE7B7;

  /* Warning - Lighter amber */
  --color-warning: #FBBF24;
  --color-warning-hover: #FCD34D;
  --color-warning-bg: rgba(251, 191, 36, 0.15);
  --color-warning-text: #FCD34D;

  /* Danger - Lighter rose */
  --color-danger: #FB7185;
  --color-danger-hover: #FDA4AF;
  --color-danger-bg: rgba(251, 113, 133, 0.15);
  --color-danger-text: #FDA4AF;

  /* Info - Lighter sky */
  --color-info: #38BDF8;
  --color-info-hover: #7DD3FC;
  --color-info-bg: rgba(56, 189, 248, 0.15);
  --color-info-text: #7DD3FC;

  /* ========== Shadows - Darker, more subtle ========== */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.35), 0 2px 4px -2px rgba(0, 0, 0, 0.2);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.25);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.3);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.6);

  /* Colored Shadows - Glowing effect */
  --shadow-primary: 0 4px 20px -2px rgba(45, 212, 191, 0.3);
  --shadow-success: 0 4px 20px -2px rgba(52, 211, 153, 0.3);
  --shadow-danger: 0 4px 20px -2px rgba(251, 113, 133, 0.3);

  /* Focus Shadows */
  --shadow-focus: 0 0 0 3px rgba(45, 212, 191, 0.3);
  --shadow-focus-danger: 0 0 0 3px rgba(251, 113, 133, 0.3);

  /* Inset Shadows */
  --shadow-inset: inset 0 2px 4px rgba(0, 0, 0, 0.2);

  /* ========== Overlay / Backdrop ========== */
  --overlay-bg: rgba(0, 0, 0, 0.7);
  --backdrop-blur: blur(8px);
}

/* ============================================================
   System Preference Detection
   ============================================================ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-scheme: dark;

    /* Primary */
    --color-primary: #2DD4BF;
    --color-primary-hover: #5EEAD4;
    --color-primary-light: #99F6E4;
    --color-primary-muted: #14B8A6;
    --color-primary-bg: rgba(45, 212, 191, 0.15);
    --color-primary-subtle: rgba(45, 212, 191, 0.08);

    /* Surfaces */
    --color-bg: #171412;
    --color-bg-page: #0F0D0B;
    --color-bg-elevated: #1F1C19;
    --color-bg-card: #1F1C19;
    --color-bg-hover: #292524;
    --color-bg-active: rgba(45, 212, 191, 0.12);
    --color-bg-muted: #1C1917;
    --color-bg-subtle: #171412;
    --color-bg-inset: #0F0D0B;

    /* Text */
    --color-text: #FAFAF9;
    --color-text-secondary: #D6D3D1;
    --color-text-muted: #A8A29E;
    --color-text-subtle: #78716C;
    --color-text-on-primary: #0F0D0B;
    --color-text-inverse: #1C1917;

    /* Borders */
    --color-border: #292524;
    --color-border-light: #1C1917;
    --color-border-hover: #44403C;

    /* Legacy */
    --color-text-main: var(--color-text);
    --color-secondary: var(--color-text-secondary);
    --color-bg-light: var(--color-bg-page);
    --color-accent-cream: rgba(254, 243, 199, 0.15);
    --color-accent-beige: rgba(253, 230, 138, 0.2);

    /* Semantic */
    --color-success: #34D399;
    --color-success-hover: #6EE7B7;
    --color-success-bg: rgba(52, 211, 153, 0.15);
    --color-success-text: #6EE7B7;

    --color-warning: #FBBF24;
    --color-warning-hover: #FCD34D;
    --color-warning-bg: rgba(251, 191, 36, 0.15);
    --color-warning-text: #FCD34D;

    --color-danger: #FB7185;
    --color-danger-hover: #FDA4AF;
    --color-danger-bg: rgba(251, 113, 133, 0.15);
    --color-danger-text: #FDA4AF;

    --color-info: #38BDF8;
    --color-info-hover: #7DD3FC;
    --color-info-bg: rgba(56, 189, 248, 0.15);
    --color-info-text: #7DD3FC;

    /* Shadows */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.35), 0 2px 4px -2px rgba(0, 0, 0, 0.2);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.25);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.3);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.6);

    --shadow-primary: 0 4px 20px -2px rgba(45, 212, 191, 0.3);
    --shadow-success: 0 4px 20px -2px rgba(52, 211, 153, 0.3);
    --shadow-danger: 0 4px 20px -2px rgba(251, 113, 133, 0.3);
    --shadow-focus: 0 0 0 3px rgba(45, 212, 191, 0.3);
    --shadow-focus-danger: 0 0 0 3px rgba(251, 113, 133, 0.3);
    --shadow-inset: inset 0 2px 4px rgba(0, 0, 0, 0.2);

    --overlay-bg: rgba(0, 0, 0, 0.7);
    --backdrop-blur: blur(8px);
  }
}

/* ============================================================
   Mobile Typography Scale
   ============================================================ */
@media (max-width: 768px) {
  :root {
    --text-xs: 12px;
    --text-sm: 14px;
    --text-base: 16px;
    --text-lg: 18px;
    --text-xl: 22px;
    --text-2xl: 26px;
    --text-3xl: 32px;
    --text-4xl: 40px;
  }
}

/* ============================================================
   Theme Transition Classes
   ============================================================ */
.theme-transitioning,
.theme-transitioning *,
.theme-transitioning *::before,
.theme-transitioning *::after {
  transition:
    background-color var(--transition-theme),
    border-color var(--transition-theme),
    color var(--transition-theme),
    box-shadow var(--transition-theme),
    fill var(--transition-theme),
    stroke var(--transition-theme) !important;
}