/*
 * Tokens de design do portal. Todo valor visual do portal.css vem daqui.
 * Nomes seguem o Open Props; tipografia e espaçamento fluidos entre 360px e 1440px (Utopia).
 */
:root {
  color-scheme: light;

  /* Fontes */
  --font-sans: "Ubuntu", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-brand: "Audiowide", "Ubuntu", system-ui, sans-serif;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold: 700;
  --leading-tight: 1.25;
  --leading-normal: 1.5;

  /* Tipografia fluida */
  --step--2: 0.6875rem;
  --step--1: clamp(0.781rem, 0.771rem + 0.046vw, 0.8125rem);
  --step-0: clamp(0.875rem, 0.854rem + 0.093vw, 0.9375rem);
  --step-1: clamp(1rem, 0.969rem + 0.139vw, 1.094rem);
  --step-2: clamp(1.156rem, 1.094rem + 0.278vw, 1.344rem);
  --step-3: clamp(1.375rem, 1.25rem + 0.556vw, 1.75rem);
  --step-4: clamp(1.625rem, 1.375rem + 1.111vw, 2.375rem);

  /* Espaçamento */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: clamp(0.625rem, 0.583rem + 0.185vw, 0.75rem);
  --space-s: clamp(0.875rem, 0.833rem + 0.185vw, 1rem);
  --space-m: clamp(1.25rem, 1.167rem + 0.37vw, 1.5rem);
  --space-l: clamp(1.75rem, 1.583rem + 0.741vw, 2.25rem);
  --space-xl: clamp(2.5rem, 2.167rem + 1.481vw, 3.5rem);

  /* Paleta da marca: o azul-marinho que o portal sempre usou */
  --brand-900: #102a43;
  --brand-800: #173a5a;
  --brand-700: #25476a;
  --brand-600: #2f5d8a;
  --brand-200: #c9dbea;
  --brand-100: #e4edf5;
  --brand-50: #f1f6fa;

  /* Neutros levemente frios, para combinar com a marca */
  --gray-0: #ffffff;
  --gray-50: #f5f7f9;
  --gray-100: #ebeff3;
  --gray-200: #dde3e9;
  --gray-300: #c5ced7;
  --gray-500: #6a7886;
  --gray-600: #526170;
  --gray-700: #3a4855;
  --gray-900: #15212c;

  /* Tons de estado: texto e fundo, sempre com contraste AA */
  --info-text: #17598f;
  --info-bg: #e6f1fa;
  --success-text: #14703f;
  --success-bg: #e4f5ec;
  --warning-text: #8a5208;
  --warning-bg: #fdf3e0;
  --danger-text: #b4232a;
  --danger-bg: #fcecec;
  --danger-solid: #c8232b;
  --danger-solid-hover: #a91d24;
  --whatsapp-solid: #0f7a41;
  --whatsapp-solid-hover: #0c6536;

  /* Papéis semânticos */
  --page: var(--gray-50);
  --surface: var(--gray-0);
  --surface-sunken: var(--gray-50);
  --surface-hover: var(--brand-50);
  --text: var(--gray-900);
  --text-soft: var(--gray-700);
  --text-muted: var(--gray-600);
  --text-on-brand: var(--gray-0);
  --text-on-brand-muted: var(--brand-200);
  --on-brand-dot: rgb(255 255 255 / 0.09);
  --on-brand-hover: rgb(255 255 255 / 0.12);
  --on-brand-line: rgb(255 255 255 / 0.25);
  --border: var(--gray-200);
  --border-strong: var(--gray-300);
  --primary: var(--brand-700);
  --primary-hover: var(--brand-800);
  --focus-ring: var(--brand-600);
  --scrim: rgb(16 42 67 / 0.5);

  /* Gráficos: slots validados para daltonismo; identidade também vem da legenda e da tabela */
  --series-1: #2a78d6;
  --series-2: #eb6834;
  --chart-grid: var(--gray-100);
  --chart-height: 16.25rem;
  --bar-thickness: 0.875rem;
  --bar-name-width: 14rem;
  --tile-min: 12.5rem;
  --chart-min: 28rem;

  /* Formas */
  --radius-1: 4px;
  --radius-2: 8px;
  --radius-3: 12px;
  --radius-round: 999px;
  --border-size: 1px;
  --outline-size: 2px;
  --focus-halo: 3px;
  --dot-grid: 22px;

  --shadow-1: 0 1px 2px rgb(16 42 67 / 0.06);
  --shadow-2: 0 4px 12px rgb(16 42 67 / 0.08), 0 1px 2px rgb(16 42 67 / 0.06);
  --shadow-3: 0 16px 40px rgb(16 42 67 / 0.18), 0 2px 6px rgb(16 42 67 / 0.08);

  /* Controles */
  --control-height: 2.5rem;
  --control-height-s: 2rem;
  --icon-size: 1.125rem;
  --icon-size-s: 1rem;
  --avatar-size: 2rem;
  --thumb-size: 3rem;
  --textarea-height: 6rem;
  --topbar-height: 3.75rem;
  --modal-width: 40rem;
  --modal-width-lg: 52rem;
  --form-width: 23.75rem;
  --toast-width: 22rem;
  --dialog-width: 28rem;
  --bell-width: 24rem;
  --cell-width: 22rem;
  --cell-main-width: 14rem;

  /* Movimento: só para responder a uma ação da pessoa */
  --duration-fast: 120ms;
  --duration-medium: 200ms;
  --duration-spring: 340ms;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-spring: linear(0, 0.009, 0.035 2.1%, 0.141 4.4%, 0.723 12.9%, 0.938 16.7%, 1.017, 1.077, 1.121, 1.149 24.3%, 1.159, 1.163, 1.161, 1.154 29.9%, 1.129 32.8%, 1.051 39.6%, 1.017 43.1%, 0.991, 0.977 51%, 0.974 53.8%, 0.975 57.1%, 0.997 69.8%, 1.003 76.9%, 1);

  /* Camadas */
  --layer-topbar: 100;
  --layer-menu: 200;
  --layer-panel: 300;
  --layer-modal: 1000;
  --layer-notice: 2000;
  --layer-progress: 100000000;
  --layer-toast: 100000001;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 1ms;
    --duration-medium: 1ms;
    --duration-spring: 1ms;
    --ease-spring: linear;
  }
}