/**
 * Dark Theme - Mocha Brown Palette (Pantone 2025 Inspired)
 * Warm, elegant, minimalist dark mode
 */

:root[data-theme="dark"] {
  /* ===== COLOR PALETTE ===== */

  /* Backgrounds - AFAM Dark Blue Theme */
  --color-background: #1B203D;        /* Dark blue background */
  --color-surface: #141729;           /* Darker blue surface (questions section) */
  --color-surface-elevated: #1F2542;  /* Elevated elements */
  --color-surface-overlay: rgba(20, 23, 41, 0.95); /* Semi-transparent overlays */

  /* Gradients */
  --overlay-gradient: linear-gradient(180deg, rgba(27, 32, 61, 0.85) 0%, rgba(27, 32, 61, 0.5) 55%, transparent 100%);

  /* Primary Colors (Glia Brand) */
  --color-primary: #5C6C4A;           /* Glia olive green */
  --color-primary-hover: #6B7D57;     /* Lighter on hover */
  --color-primary-active: #4D5A3E;    /* Darker on active */
  --color-primary-subtle: rgba(92, 108, 74, 0.15); /* Subtle backgrounds */

  /* Accent Colors (Glia Gold) */
  --color-accent: #D4A959;            /* Glia gold */
  --color-accent-hover: #E0B86B;      /* Lighter on hover */
  --color-accent-active: #C29946;     /* Darker on active */
  --color-accent-subtle: rgba(212, 169, 89, 0.15); /* Subtle backgrounds */

  /* Text Colors */
  --color-text-primary: #E8E0D3;      /* Warm off-white */
  --color-text-secondary: #B8AFA3;    /* Muted text */
  --color-text-tertiary: #857C72;     /* Subtle text */
  --color-text-inverse: #1C1410;      /* Dark text on light backgrounds */

  /* Semantic Colors */
  --color-success: #6B9A5F;           /* Green success */
  --color-warning: #D4A959;           /* Gold warning (accent) */
  --color-danger: #C76B5F;            /* Warm red danger */
  --color-info: #7B9DB3;              /* Blue info */

  /* Borders & Dividers */
  --color-border: rgba(232, 224, 211, 0.1); /* Subtle borders */
  --color-border-hover: rgba(232, 224, 211, 0.2); /* Hover borders */
  --color-divider: rgba(232, 224, 211, 0.08); /* Section dividers */

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5), 0 4px 6px rgba(0, 0, 0, 0.4);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.6), 0 10px 10px rgba(0, 0, 0, 0.4);

  /* Glows (for particle effects) */
  --glow-primary: rgba(92, 108, 74, 0.4);
  --glow-accent: rgba(212, 169, 89, 0.4);

  /* Particle color for dark theme - White for contrast on dark blue */
  --particle-color: #FFFFFF;          /* White for text morph on dark blue background */

  /* ===== SPACING & LAYOUT ===== */
  --spacing-xs: 0.25rem;    /* 4px */
  --spacing-sm: 0.5rem;     /* 8px */
  --spacing-md: 1rem;       /* 16px */
  --spacing-lg: 1.5rem;     /* 24px */
  --spacing-xl: 2rem;       /* 32px */
  --spacing-2xl: 3rem;      /* 48px */

  /* ===== TYPOGRAPHY ===== */
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-size-xs: 0.75rem;   /* 12px */
  --font-size-sm: 0.875rem;  /* 14px */
  --font-size-base: 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: 3rem;     /* 48px */

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

  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;

  /* ===== BORDER RADIUS ===== */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* ===== TRANSITIONS ===== */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 350ms ease;
  --transition-theme: 300ms ease-in-out; /* For theme switching */

  /* ===== Z-INDEX LAYERS ===== */
  --z-base: 0;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-modal-overlay: 400;
  --z-modal: 500;
  --z-popover: 600;
  --z-tooltip: 700;
}

/* ===== SMOOTH THEME TRANSITIONS ===== */
:root[data-theme="dark"] * {
  transition: background-color var(--transition-theme),
              border-color var(--transition-theme),
              color var(--transition-theme),
              box-shadow var(--transition-theme);
}

/* Prevent transition on initial load */
:root[data-theme="dark"].no-transition * {
  transition: none !important;
}