/* ============================================
   LMS Design System - CSS Custom Properties
   Monochrome UI with accent colors only in content
   ============================================ */

:root {
  /* Typography */
  --font-stack: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  /* UI Colors - monochrome */
  --color-bg: #f5f5f5;
  --color-surface: #ffffff;
  --color-sidebar-bg: #fafafa;
  --color-sidebar-hover: #eeeeee;
  --color-sidebar-active: #e0e0e0;
  --color-text: #1a1a1a;
  --color-text-secondary: #666666;
  --color-text-muted: #999999;
  --color-border: #e0e0e0;
  --color-border-light: #f0f0f0;
  --color-accent: #333333;
  --color-accent-hover: #1a1a1a;
  --color-accent-light: #f0f0f0;

  /* Competency grid colors — monochromatic */
  --grid-struggling: #ffffff;
  --grid-needs-practice: #bdbdbd;
  --grid-practised: #e8e8e8;
  --grid-level1: #a0a0a0;
  --grid-level2: #666666;
  --grid-mastered: #000000;
  --grid-expired: #999999;
  --grid-locked: #e0e0e0;

  /* Competency grid gradients — monochromatic */
  --grid-struggling-grad: linear-gradient(135deg, #ffffff, #f0f0f0);
  --grid-needs-practice-grad: linear-gradient(135deg, #cfcfcf, #aaaaaa);
  --grid-practised-grad: linear-gradient(135deg, #f0f0f0, #dcdcdc);
  --grid-level1-grad: linear-gradient(135deg, #b0b0b0, #888888);
  --grid-level2-grad: linear-gradient(135deg, #777777, #4a4a4a);
  --grid-mastered-grad: linear-gradient(135deg, #1a1a1a, #000000);

  /* Status colors (used sparingly) */
  --color-success: #10a37f;
  --color-success-light: #e6f7f2;
  --color-warning: #f59e0b;
  --color-warning-light: #fef3cd;
  --color-error: #ef4444;
  --color-error-light: #fde8e8;
  --color-info: #3b82f6;
  --color-info-light: #e8f0fe;

  /* Amber/Warning extended palette */
  --color-warning-dark: #92400e;
  --color-warning-darker: #422006;
  --color-warning-medium: #b45309;
  --color-warning-bright: #fbbf24;
  --color-warning-pale: #fde68a;
  --color-warning-bg: #fef3c7;

  /* Badge semantic colors */
  --color-badge-purple: #7c3aed;
  --color-badge-purple-bg: #f3e8ff;
  --color-badge-blue: #1d4ed8;
  --color-badge-blue-bg: #dbeafe;
  --color-badge-amber: #92400e;
  --color-badge-amber-bg: #fef3c7;
  --color-badge-pink: #9d174d;
  --color-badge-pink-bg: #fce7f3;

  /* Calendar event colors */
  --calendar-sync-bg: #dbeafe;
  --calendar-sync-text: #1e40af;
  --calendar-important-bg: #e0e7ff;
  --calendar-important-text: #3730a3;
  --calendar-deadline-bg: #fce7f3;
  --calendar-deadline-text: #9d174d;

  /* Rubric colors */
  --rubric-unsatisfactory: #c0392b;
  --rubric-unsatisfactory-bg: #fdf2f1;
  --rubric-unsatisfactory-border: #e8b4af;
  --rubric-unsatisfactory-shadow: rgba(192,57,43,0.2);
  --rubric-developing: #e67e22;
  --rubric-developing-bg: #fef8f0;
  --rubric-developing-border: #f2cf9a;
  --rubric-developing-shadow: rgba(230,126,34,0.2);
  --rubric-competent: #2980b9;
  --rubric-competent-bg: #f0f7fd;
  --rubric-competent-border: #9ec8e8;
  --rubric-competent-shadow: rgba(41,128,185,0.2);
  --rubric-exemplary: #27ae60;
  --rubric-exemplary-bg: #f0faf4;
  --rubric-exemplary-border: #91d5ae;
  --rubric-exemplary-shadow: rgba(39,174,96,0.2);

  /* Spacing scale */
  --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: 32px;
  --space-8: 48px;
  --space-9: 60px;

  /* Layout */
  --sidebar-width: 260px;
  --header-height: 56px;
  --content-max-width: 1200px;
  --radius: 8px;
  --radius-sm: 4px;
  --radius-lg: 12px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.06);
  --shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.04);
  --shadow-lg: 0 10px 25px rgba(0,0,0,0.1), 0 4px 10px rgba(0,0,0,0.05);

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition: 200ms ease;
  --transition-slow: 300ms ease;
}

/* Dark mode - auto (system preference) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: #121212;
    --color-surface: #1e1e1e;
    --color-sidebar-bg: #1a1a1a;
    --color-sidebar-hover: #2a2a2a;
    --color-sidebar-active: #333333;
    --color-text: #e0e0e0;
    --color-text-secondary: #aaaaaa;
    --color-text-muted: #777777;
    --color-border: #333333;
    --color-border-light: #2a2a2a;
    --color-accent: #e0e0e0;
    --color-accent-hover: #ffffff;
    --color-accent-light: #2a2a2a;

    /* Status colors — adjusted for dark backgrounds */
    --color-success-light: #0d2e24;
    --color-error-light: #3b1515;
    --color-warning-light: #3b2e0e;
    --color-info-light: #162640;

    /* Competency grid — inverted: mastered=white, not-attempted=dark */
    --grid-struggling: #2a2a2a;
    --grid-needs-practice: #555555;
    --grid-practised: #3a3a3a;
    --grid-level1: #777777;
    --grid-level2: #aaaaaa;
    --grid-mastered: #ffffff;

    --grid-struggling-grad: linear-gradient(135deg, #2a2a2a, #1e1e1e);
    --grid-needs-practice-grad: linear-gradient(135deg, #555555, #444444);
    --grid-practised-grad: linear-gradient(135deg, #3a3a3a, #2e2e2e);
    --grid-level1-grad: linear-gradient(135deg, #777777, #666666);
    --grid-level2-grad: linear-gradient(135deg, #aaaaaa, #999999);
    --grid-mastered-grad: linear-gradient(135deg, #ffffff, #e0e0e0);

    /* Amber/Warning — dark overrides */
    --color-warning-dark: #fde68a;
    --color-warning-darker: #fde68a;
    --color-warning-medium: #fbbf24;
    --color-warning-bg: #422006;
    --color-warning-pale: #b45309;

    /* Calendar — dark overrides */
    --calendar-sync-bg: #1e3a5f;
    --calendar-sync-text: #93c5fd;
    --calendar-important-bg: #312e81;
    --calendar-important-text: #a5b4fc;
    --calendar-deadline-bg: #831843;
    --calendar-deadline-text: #f9a8d4;

    /* Rubric — dark overrides */
    --rubric-unsatisfactory: #e74c3c;
    --rubric-unsatisfactory-bg: #3a1c1a;
    --rubric-unsatisfactory-border: #6b2c27;
    --rubric-developing: #f39c12;
    --rubric-developing-bg: #3a2e1a;
    --rubric-developing-border: #6b5427;
    --rubric-competent: #3498db;
    --rubric-competent-bg: #1a2e3a;
    --rubric-competent-border: #275468;
    --rubric-exemplary: #2ecc71;
    --rubric-exemplary-bg: #1a3a24;
    --rubric-exemplary-border: #276b3e;
  }
}

/* Dark mode - forced via toggle */
:root[data-theme="dark"] {
  --color-bg: #121212;
  --color-surface: #1e1e1e;
  --color-sidebar-bg: #1a1a1a;
  --color-sidebar-hover: #2a2a2a;
  --color-sidebar-active: #333333;
  --color-text: #e0e0e0;
  --color-text-secondary: #aaaaaa;
  --color-text-muted: #777777;
  --color-border: #333333;
  --color-border-light: #2a2a2a;
  --color-accent: #e0e0e0;
  --color-accent-hover: #ffffff;
  --color-accent-light: #2a2a2a;

  /* Status colors — adjusted for dark backgrounds */
  --color-success-light: #0d2e24;
  --color-error-light: #3b1515;
  --color-warning-light: #3b2e0e;
  --color-info-light: #162640;

  /* Competency grid — inverted: mastered=white, not-attempted=dark */
  --grid-struggling: #2a2a2a;
  --grid-needs-practice: #555555;
  --grid-practised: #3a3a3a;
  --grid-level1: #777777;
  --grid-level2: #aaaaaa;
  --grid-mastered: #ffffff;

  --grid-struggling-grad: linear-gradient(135deg, #2a2a2a, #1e1e1e);
  --grid-needs-practice-grad: linear-gradient(135deg, #555555, #444444);
  --grid-practised-grad: linear-gradient(135deg, #3a3a3a, #2e2e2e);
  --grid-level1-grad: linear-gradient(135deg, #777777, #666666);
  --grid-level2-grad: linear-gradient(135deg, #aaaaaa, #999999);
  --grid-mastered-grad: linear-gradient(135deg, #ffffff, #e0e0e0);

  /* Amber/Warning — dark overrides */
  --color-warning-dark: #fde68a;
  --color-warning-darker: #fde68a;
  --color-warning-medium: #fbbf24;
  --color-warning-bg: #422006;
  --color-warning-pale: #b45309;

  /* Calendar — dark overrides */
  --calendar-sync-bg: #1e3a5f;
  --calendar-sync-text: #93c5fd;
  --calendar-important-bg: #312e81;
  --calendar-important-text: #a5b4fc;
  --calendar-deadline-bg: #831843;
  --calendar-deadline-text: #f9a8d4;

  /* Rubric — dark overrides */
  --rubric-unsatisfactory: #e74c3c;
  --rubric-unsatisfactory-bg: #3a1c1a;
  --rubric-unsatisfactory-border: #6b2c27;
  --rubric-developing: #f39c12;
  --rubric-developing-bg: #3a2e1a;
  --rubric-developing-border: #6b5427;
  --rubric-competent: #3498db;
  --rubric-competent-bg: #1a2e3a;
  --rubric-competent-border: #275468;
  --rubric-exemplary: #2ecc71;
  --rubric-exemplary-bg: #1a3a24;
  --rubric-exemplary-border: #276b3e;
}

/* Light mode - forced via toggle (overrides system dark pref) */
:root[data-theme="light"] {
  --color-bg: #f5f5f5;
  --color-surface: #ffffff;
  --color-sidebar-bg: #fafafa;
  --color-sidebar-hover: #eeeeee;
  --color-sidebar-active: #e0e0e0;
  --color-text: #1a1a1a;
  --color-text-secondary: #666666;
  --color-text-muted: #999999;
  --color-border: #e0e0e0;
  --color-border-light: #f0f0f0;
  --color-accent: #333333;
  --color-accent-hover: #1a1a1a;
  --color-accent-light: #f0f0f0;
}