/* theme-hall.css — StudioHallel Design System v2
   Material Design 3 tokens + Plus Jakarta Sans + utilitários */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=block');

/* ═══ RESET ═══ */
*,*::before,*::after{box-sizing:border-box}
body{font-family:'Plus Jakarta Sans','Inter',sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}

/* ═══ SCROLLBAR ═══ */
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(204,195,216,.4);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:rgba(115,46,228,.3)}

:root {
  /* ── MD3 Color Tokens ── */
  --md-primary: #732ee4;
  --md-primary-container: #7c3aed;
  --md-on-primary: #ffffff;
  --md-on-primary-container: #ede0ff;
  --md-primary-fixed: #eaddff;
  --md-primary-fixed-dim: #d2bbff;

  --md-secondary: #0058be;
  --md-secondary-container: #2170e4;
  --md-on-secondary: #ffffff;

  --md-tertiary: #005b3d;
  --md-tertiary-container: #007650;
  --md-on-tertiary: #ffffff;

  --md-error: #ba1a1a;
  --md-error-container: #ffdad6;

  --md-background: #f7f9fb;
  --md-surface: #f7f9fb;
  --md-surface-container-lowest: #ffffff;
  --md-surface-container-low: #f2f4f6;
  --md-surface-container: #eceef0;
  --md-surface-container-high: #e6e8ea;
  --md-surface-container-highest: #e0e3e5;
  --md-surface-variant: #e0e3e5;
  --md-surface-bright: #f7f9fb;
  --md-surface-dim: #d8dadc;
  --md-inverse-surface: #2d3133;

  --md-on-background: #191c1e;
  --md-on-surface: #191c1e;
  --md-on-surface-variant: #4a4455;
  --md-inverse-on-surface: #eff1f3;

  --md-outline: #7b7487;
  --md-outline-variant: #ccc3d8;

  /* ── Shadows (depth system) ── */
  --shadow-depth-1: 0 1px 3px rgba(0,0,0,.04), 0 4px 16px rgba(0,0,0,.04);
  --shadow-depth-2: 0 2px 6px rgba(0,0,0,.06), 0 8px 28px rgba(0,0,0,.07);
  --shadow-depth-3: 0 4px 12px rgba(0,0,0,.06), 0 12px 40px rgba(0,0,0,.08);
  --shadow-depth-4: 0 8px 24px rgba(0,0,0,.08), 0 24px 64px rgba(0,0,0,.1);
  --shadow-depth-5: 0 12px 32px rgba(0,0,0,.12), 0 32px 80px rgba(0,0,0,.14);

  /* ── Radius ── */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 24px;
  --radius-full: 9999px;

  /* ── Typography ── */
  --font-sans: 'Plus Jakarta Sans', 'Inter', sans-serif;

  /* ═══════════════════════════════════════════
     ALIASES — mapeiam variáveis antigas do site
     para os novos tokens MD3. Não remova.
     ═══════════════════════════════════════════ */

  /* Primary (roxo MD3) */
  --blue: var(--md-primary);
  --blue-light: var(--md-primary-container);
  --blue-pale: rgba(115,46,228,.07);
  --purple: var(--md-primary);
  --purple-light: var(--md-primary-container);
  --purple-pale: rgba(115,46,228,.07);
  --hallel-purple: var(--md-primary);
  --hallel-purple-light: var(--md-primary-container);
  --hallel-purple-pale: rgba(115,46,228,.07);

  /* Secondary (azul) */
  --secondary: var(--md-secondary);
  --secondary-container: var(--md-secondary-container);

  /* Sofia (mantido como cor de destaque) */
  --sofia: #8B5CF6;

  /* Texto */
  --text: var(--md-on-background);
  --text-muted: var(--md-on-surface-variant);
  --text-light: #7b7487;
  --section-title: var(--md-on-background);

  /* Fundos */
  --bg: var(--md-background);
  --bg-app: var(--md-background);
  --bg-card: var(--md-surface-container-lowest);
  --bg-glass: rgba(255,255,255,.82);
  --nav-bg: rgba(255,255,255,.82);
  --nav-border: rgba(204,195,216,.5);
  --card-bg: rgba(255,255,255,.88);
  --card-border: rgba(204,195,216,.5);
  --sidebar-bg: rgba(255,255,255,.82);
  --service-bg: rgba(255,255,255,.82);

  /* Bordas */
  --border: rgba(204,195,216,.5);
  --border-glass: rgba(255,255,255,.7);
  --divider: rgba(204,195,216,.35);

  /* Campos */
  --field-bg: #f2f4f6;
  --field-border: #e0e3e5;

  /* Estados */
  --success: #10B981;
  --success-pale: rgba(16,185,129,.1);
  --warning: #F59E0B;
  --warning-pale: rgba(245,158,11,.1);
  --danger: #EF4444;
  --danger-pale: rgba(239,68,68,.1);

  /* Sombras (mapeadas para o depth system) */
  --shadow-sm: var(--shadow-depth-1);
  --shadow-md: var(--shadow-depth-2);
  --shadow-lg: var(--shadow-depth-3);
  --shadow-xl: var(--shadow-depth-4);

  /* Gradientes de fundo (tons suaves de superfície) */
  --grad-1: #e6edff;
  --grad-2: #eef2fd;
  --grad-3: #f5f7fc;
  --grad-4: #ffffff;
  --grad-5: #f3f6fd;
  --grad-6: #eaf0fc;

  /* Elementos decorativos */
  --tag-bg: rgba(242,244,246,.9);
  --problem-num: rgba(115,46,228,.06);
  --grid-line: rgba(115,46,228,.03);
  --room-bg: #0B1120;
}

/* ── Dark mode ── */
html.dark {
  --md-background: #0e1014;
  --md-surface: #111318;
  --md-surface-container-lowest: #0e1014;
  --md-surface-container-low: #111318;
  --md-surface-container: #16191e;
  --md-surface-container-high: #1a1d22;
  --md-surface-container-highest: #1e2126;
  --md-surface-variant: #2d3133;
  --md-surface-bright: #1e2126;
  --md-surface-dim: #0a0c10;
  --md-inverse-surface: #e0e3e5;

  --md-on-background: #eff1f3;
  --md-on-surface: #eff1f3;
  --md-on-surface-variant: #ccc3d8;
  --md-inverse-on-surface: #191c1e;

  --md-outline: #7b7487;
  --md-outline-variant: #4a4455;

  --shadow-depth-1: 0 1px 3px rgba(0,0,0,.3), 0 4px 16px rgba(0,0,0,.2);
  --shadow-depth-2: 0 2px 6px rgba(0,0,0,.4), 0 8px 28px rgba(0,0,0,.3);
  --shadow-depth-3: 0 4px 12px rgba(0,0,0,.4), 0 12px 40px rgba(0,0,0,.35);
  --shadow-depth-4: 0 8px 24px rgba(0,0,0,.5), 0 24px 64px rgba(0,0,0,.4);
  --shadow-depth-5: 0 12px 32px rgba(0,0,0,.6), 0 32px 80px rgba(0,0,0,.5);

  /* ═══════════════════════════════════════════
     ALIASES — Dark mode
     ═══════════════════════════════════════════ */
  --blue-pale: rgba(157,124,250,.12);
  --purple-pale: rgba(157,124,250,.12);
  --hallel-purple-pale: rgba(157,124,250,.12);

  --bg-glass: rgba(14,16,20,.88);
  --nav-bg: rgba(14,16,20,.88);
  --nav-border: rgba(74,68,85,.5);
  --card-bg: rgba(14,16,20,.88);
  --card-border: rgba(74,68,85,.5);
  --sidebar-bg: rgba(14,16,20,.88);
  --service-bg: rgba(14,16,20,.82);
  --border-glass: rgba(255,255,255,.05);
  --border: rgba(74,68,85,.5);
  --divider: rgba(74,68,85,.35);

  --field-bg: rgba(35,45,75,.5);
  --field-border: rgba(112,140,255,.22);

  --success-pale: rgba(52,211,153,.14);
  --warning-pale: rgba(251,191,36,.14);
  --danger-pale: rgba(248,113,113,.14);

  --shadow-sm: var(--shadow-depth-1);
  --shadow-md: var(--shadow-depth-2);
  --shadow-lg: var(--shadow-depth-3);
  --shadow-xl: var(--shadow-depth-4);

  --grad-1: #050810;
  --grad-2: #080d1c;
  --grad-3: #0b1226;
  --grad-4: #080e20;
  --grad-5: #050810;
  --grad-6: #04070e;

  --tag-bg: rgba(17,21,30,.9);
  --problem-num: rgba(157,124,250,.08);
  --grid-line: rgba(157,124,250,.05);
}