/* =============================================================================
   Aula TP Chile · Design Language SPEC v2.0
   Source of truth: tokens §2. Do not introduce new brand hexes.
   Aliases --aula-* keep existing components on the same palette.
   ============================================================================= */

:root {
  --color-navy: #0b3a6b;
  --color-navy-deep: #072a4e;
  --color-blue: #1558a0;
  --color-blue-600: #1b6bc4;
  --color-cyan: #3ec6e0;
  --color-cyan-soft: #d6f4fa;
  --color-ink: #122033;
  --color-slate: #3d5166;
  --color-muted: #6b7c8e;
  --color-line: #d5dee8;
  --color-surface: #f4f7fb;
  --color-card: #ffffff;
  --color-ok: #1f8a5b;
  --color-ok-soft: #e6f6ee;
  --color-warn: #c47a12;
  --color-warn-soft: #fff4e0;
  --color-err: #c0392b;
  --color-err-soft: #fdecea;
  --color-info-soft: #e8f1fb;
  --specialty-climatizacion: #3ec6e0;
  --specialty-electricidad: #f0b429;
  --specialty-enfermeria: #2bb3a8;
  --specialty-administracion: var(--color-blue);
  --accent: var(--color-blue);
  --color-a11y: #6b5ce7;

  --font-sans: var(--font-inter), "DM Sans", Inter, "Segoe UI", system-ui, sans-serif;
  --font-heading: var(--font-display), Outfit, Manrope, var(--font-sans);
  --font-mono: var(--font-plex-mono), "IBM Plex Mono", ui-monospace, monospace;
  --text-display: 800 36px/1.08 var(--font-heading);
  --text-title: 800 24px/1.15 var(--font-heading);
  --text-head: 700 18px/1.25 var(--font-heading);
  --text-body: 400 15px/1.45 var(--font-sans);
  --text-label: 500 12px/1.3 var(--font-sans);

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  --shadow-1: 0 1px 2px rgba(7, 42, 78, 0.08);
  --shadow-2: 0 8px 24px rgba(7, 42, 78, 0.12);
  --touch: 44px;
  --aside-w: 280px;
  --max-main: 1120px;

  --aula-navy: var(--color-navy);
  --aula-blue: var(--color-blue);
  --aula-blue-deep: var(--color-navy-deep);
  --aula-teal: var(--color-blue);
  --aula-cyan: var(--color-cyan);
  --aula-ink: var(--color-ink);
  --aula-muted: var(--color-muted);
  --navy: var(--color-navy);
  --blue: var(--color-blue);
  --teal: var(--color-blue);
  --ink: var(--color-ink);
  --muted: var(--color-muted);
  --pink: var(--color-blue);
  --line: var(--color-line);
  --pale: var(--color-surface);
  --white: var(--color-card);

  --aula-success: var(--color-ok);
  --aula-success-soft: var(--color-ok-soft);
  --aula-success-ink: var(--color-ok);
  --aula-warning: var(--color-warn);
  --aula-warning-soft: var(--color-warn-soft);
  --aula-warning-ink: var(--color-warn);
  --aula-danger: var(--color-err);
  --aula-danger-soft: var(--color-err-soft);
  --aula-danger-ink: var(--color-err);
  --aula-violet: var(--color-a11y);
  --aula-violet-soft: var(--color-info-soft);
  --aula-orange: var(--color-warn);
  --aula-orange-soft: var(--color-warn-soft);
  --aula-coral: var(--color-err);
  --aula-activity: var(--color-warn);

  --aula-line: var(--color-line);
  --aula-line-strong: var(--color-line);
  --aula-pale: var(--color-surface);
  --aula-surface: var(--color-card);
  --aula-surface-soft: var(--color-surface);
  --aula-surface-tint: var(--color-info-soft);
  --aula-text: var(--color-ink);
  --aula-text-secondary: var(--color-slate);
  --aula-text-muted: var(--color-muted);
  --aula-overlay: rgba(7, 42, 78, 0.32);

  --radius-xs: var(--radius-sm);
  --radius-xl: 20px;
  --radius-2xl: 24px;
  --radius-circle: 50%;

  --shadow-xs: var(--shadow-1);
  --shadow-sm: var(--shadow-1);
  --shadow-md: var(--shadow-2);
  --shadow-lg: var(--shadow-2);
  --shadow-xl: 0 18px 40px rgba(7, 42, 78, 0.16);
  --shadow-focus: 0 0 0 2px var(--color-card), 0 0 0 4px var(--color-cyan);
  --shadow-inset-soft: inset 0 0 0 1px rgba(255, 255, 255, 0.55);
  --shadow: var(--shadow-1);

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 600;
  --fw-black: 700;
  --lh-tight: 1.1;
  --lh-snug: 1.3;
  --lh-body: 1.45;
  --type-display: 36px;
  --type-h1: 24px;
  --type-h2: 18px;
  --type-h3: 15px;
  --type-body: 15px;
  --type-label: 12px;
  --type-caption: 12px;

  --btn-height: var(--touch);
  --btn-height-sm: var(--touch);
  --btn-height-lg: 52px;
  --btn-radius: var(--radius-md);
  --btn-radius-pill: var(--radius-md);
  --btn-pad-x: 20px;
  --btn-fw: 600;
  --btn-transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;

  --btn-primary-bg: var(--color-blue);
  --btn-primary-fg: var(--color-card);
  --btn-primary-shadow: var(--shadow-1);
  --btn-secondary-bg: transparent;
  --btn-secondary-fg: var(--color-blue);
  --btn-secondary-border: var(--color-blue);
  --btn-tertiary-bg: transparent;
  --btn-tertiary-fg: var(--color-blue);
  --btn-success-bg: var(--color-ok);
  --btn-success-fg: var(--color-card);
  --btn-success-shadow: var(--shadow-1);
  --btn-warning-bg: var(--color-warn);
  --btn-warning-fg: var(--color-card);
  --btn-danger-bg: var(--color-err);
  --btn-danger-fg: var(--color-card);
  --btn-disabled-bg: var(--color-line);
  --btn-disabled-fg: var(--color-muted);
  --btn-disabled-opacity: 1;

  --card-bg: var(--color-card);
  --card-border: 1px solid var(--color-line);
  --card-radius: var(--radius-lg);
  --card-radius-lg: var(--radius-lg);
  --card-padding: var(--space-4);
  --card-shadow: var(--shadow-1);
  --card-shadow-elevated: var(--shadow-2);
  --card-shadow-deep: var(--shadow-2);

  --focus-ring: 2px solid var(--color-cyan);
  --focus-ring-offset: 2px;
  --focus-ring-strong: 2px solid var(--color-cyan);
  --motion-fast: 0.15s ease;
  --motion-base: 0.18s ease;
  --motion-slow: 0.28s ease;

  --support-practice-bg: var(--color-ok-soft);
  --support-practice-border: var(--color-ok);
  --support-practice-ink: var(--color-ok);
  --support-practice-muted: var(--color-slate);
  --support-practice-icon: var(--color-ok);
  --support-practice-icon-bg: var(--color-card);
  --support-practice-hover-outline: var(--color-ok);

  --support-tutor-bg: var(--color-info-soft);
  --support-tutor-border: var(--color-blue);
  --support-tutor-ink: var(--color-navy);
  --support-tutor-muted: var(--color-slate);
  --support-tutor-icon: var(--color-blue);
  --support-tutor-icon-bg: var(--color-card);
  --support-tutor-hover-outline: var(--color-blue);

  --support-a11y-bg: var(--color-info-soft);
  --support-a11y-border: var(--color-a11y);
  --support-a11y-ink: var(--color-navy);
  --support-a11y-muted: var(--color-slate);
  --support-a11y-icon: var(--color-a11y);
  --support-a11y-icon-bg: var(--color-card);
  --support-a11y-hover-outline: var(--color-a11y);

  --support-hub-fab-bg: var(--color-navy);
  --support-hub-fab-shadow: var(--shadow-2);

  --ae-center-border: var(--color-line);
  --ae-center-ring: var(--color-card);
  --ae-center-shadow: var(--shadow-2);
  --ae-center-glow: 0 0 0 8px var(--color-cyan-soft);

  font-family: var(--font-sans);
  color: var(--color-ink);
  background: var(--color-surface);
}

[data-specialty="climatizacion"] { --accent: var(--specialty-climatizacion); }
[data-specialty="electricidad"] { --accent: var(--specialty-electricidad); }
[data-specialty="enfermeria"] { --accent: var(--specialty-enfermeria); }
[data-specialty="administracion"] { --accent: var(--specialty-administracion); }

.aula-card {
  background: var(--card-bg);
  border: var(--card-border);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  padding: var(--card-padding);
}

.aula-card--elevated {
  box-shadow: var(--card-shadow-elevated);
}

.aula-focus-ring:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast: 0s;
    --motion-base: 0s;
    --motion-slow: 0s;
  }
}