/*
 * Academic Dashboard palette.
 *
 * Dark is the default; a light variant is provided via prefers-color-scheme.
 * Token names are kept stable (--color-*) so existing rules in ui-pass9.css
 * continue to work; only values change.
 *
 * Color roles:
 *   primary    — burnt orange, used for nav/primary actions
 *   accent-dzi — warm copper, reserved for DZI/final-exam emphasis
 *   success    — green, correct answers
 *   danger     — red, wrong answers and errors
 *   warning    — amber, advisories only
 *   module-3   — warm amber/copper (web)
 *   module-4   — muted clay (problem-solving with ICT)
 */

:root {
  /* Surfaces */
  --color-bg-page: #120f0d;
  --color-bg: #1b1511;
  --color-bg-subtle: #251d17;

  --color-border: rgba(255, 239, 218, 0.11);
  --color-border-strong: rgba(255, 239, 218, 0.20);

  /* Text */
  --color-text: #f6efe7;
  --color-text-muted: #c2ad98;
  --color-text-subtle: #907865;

  /* Semantic colors */
  --color-primary: #c45f22;
  --color-primary-soft: rgba(196, 95, 34, 0.18);

  /* DZI / final exam — warm copper, not red */
  --color-accent-dzi: #d17a2d;
  --color-accent-dzi-soft: rgba(209, 122, 45, 0.18);

  --color-module-3: #cf7f2e;
  --color-module-3-soft: rgba(207, 127, 46, 0.16);
  --color-module-4: #a86b3f;
  --color-module-4-soft: rgba(168, 107, 63, 0.17);

  --color-success: #22c55e;
  --color-success-soft: rgba(34, 197, 94, 0.15);
  --color-warning: #f0b23c;
  --color-warning-soft: rgba(240, 178, 60, 0.17);
  --color-danger: #f05252;
  --color-danger-soft: rgba(240, 82, 82, 0.16);

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-8: 48px;

  /* Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 18px;
  --radius-pill: 9999px;

  /* Type */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;

  /* Shadows — softer on dark surfaces */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.45);

  --t-fast: 100ms ease;
  --t-base: 150ms ease;
  --t-slow: 250ms ease;

  --header-height: 64px;
}

@media (prefers-color-scheme: light) {
  :root {
    --color-bg-page: #120f0d;
    --color-bg: #1b1511;
    --color-bg-subtle: #251d17;

    --color-border: rgba(255, 239, 218, 0.11);
    --color-border-strong: rgba(255, 239, 218, 0.20);

    --color-text: #f6efe7;
    --color-text-muted: #c2ad98;
    --color-text-subtle: #907865;

    --color-primary-soft: rgba(196, 95, 34, 0.18);
    --color-accent-dzi-soft: rgba(209, 122, 45, 0.18);
    --color-module-3-soft: rgba(207, 127, 46, 0.16);
    --color-module-4-soft: rgba(168, 107, 63, 0.17);
    --color-success-soft: rgba(34, 197, 94, 0.15);
    --color-warning-soft: rgba(240, 178, 60, 0.17);
    --color-danger-soft: rgba(240, 82, 82, 0.16);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.45);
  }
}