@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css");
@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,600;12..96,700&family=IBM+Plex+Sans:wght@400;500;600&display=swap");

:root {
  --font-display: "Bricolage Grotesque", system-ui, sans-serif;
  --font-body: "IBM Plex Sans", system-ui, sans-serif;

  /* Cor padrão UniEstoque */
  --primary: #32476d;
  --primary-hover: #3d5785;
  --primary-dark: #243552;
  --primary-soft: rgba(50, 71, 109, 0.12);
  --primary-glow: rgba(50, 71, 109, 0.28);

  --shell: var(--primary);
  --shell-hover: var(--primary-hover);
  --shell-dark: var(--primary-dark);
  --shell-shadow: rgba(50, 71, 109, 0.32);
  --shell-shadow-md: rgba(50, 71, 109, 0.2);
  --shell-shadow-sm: rgba(50, 71, 109, 0.12);

  --accent: var(--primary);
  --accent-hover: var(--primary-hover);
  --accent-dark: var(--primary-dark);
  --accent-soft: var(--primary-soft);
  --accent-glow: var(--primary-glow);

  --bg: #f5f7fa;
  --bg-elevated: #ffffff;
  --bg-muted: #eef1f6;

  --text: #14171f;
  --text-secondary: #4b5568;
  --text-tertiary: #7a8494;

  --border: rgba(20, 23, 31, 0.08);
  --border-strong: rgba(20, 23, 31, 0.14);

  --shadow-sm: 0 1px 2px rgba(20, 23, 31, 0.04);
  --shadow-md: 0 8px 30px rgba(50, 71, 109, 0.1);
  --shadow-lg: 0 24px 60px rgba(50, 71, 109, 0.14);

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-full: 999px;

  --danger: #c53030;
  --danger-bg: #fff5f5;

  --radius: var(--radius-md);
  --white: var(--bg-elevated);
  --gray: var(--text-secondary);
  --shadow: var(--shadow-sm);

  /* aliases usados nas telas internas */
  --brand: var(--primary);
  --brand-2: var(--primary-hover);
  --brand-soft: var(--primary-soft);
  --paper: var(--bg);
  --paper-2: var(--bg-muted);
  --surface: var(--bg-elevated);
  --line: var(--border);
  --ink: var(--text);
  --ink-muted: var(--text-secondary);
}