/*
 * Design tokens — extraídos de docs/referencia/DESIGN-apple.md e do HTML do design.
 *
 * Regra de ouro deste arquivo: nenhum valor de cor, fonte, espaçamento ou raio
 * deve ser escrito "na mão" em app.css. Tudo passa por uma variável daqui.
 * Para mudar a identidade visual da plataforma, mude só este arquivo.
 */

:root {
  /* ---------- Cores ---------- */
  /* Azul de ação: o ÚNICO acento interativo do sistema. */
  --color-primary: #0066cc;
  --color-primary-focus: #0071e3;
  --color-primary-on-dark: #2997ff;
  --color-primary-tint: #eaf2fb;
  --color-primary-border: #c7dcf5;

  /* Texto */
  --color-ink: #1d1d1f;
  --color-ink-muted-80: #333333;
  --color-ink-muted-48: #7a7a7a;
  --color-on-dark: #ffffff;
  --color-on-dark-muted: #cccccc;

  /* Superfícies */
  --color-canvas: #ffffff;
  --color-canvas-parchment: #f5f5f7;
  --color-surface-pearl: #fafafc;
  --color-surface-black: #000000;
  --color-chip-translucent: rgba(210, 210, 215, 0.64);

  /* Linhas */
  --color-divider-soft: #f0f0f0;
  --color-hairline: #e0e0e0;
  --color-hairline-soft: rgba(0, 0, 0, 0.08);

  /* Status — sempre acompanhados de texto, nunca só cor (acessibilidade). */
  --color-status-scheduled-bg: #eaf2fb;
  --color-status-scheduled-fg: #0066cc;
  --color-status-done-bg: #e8f3ea;
  --color-status-done-fg: #1d6b33;
  --color-status-cancelled-bg: #fdecec;
  --color-status-cancelled-fg: #c0281c;
  --color-status-rescheduled-bg: #fdf3e3;
  --color-status-rescheduled-fg: #8a5a00;
  --color-status-failed-bg: #fdecec;
  --color-status-failed-fg: #c0281c;
  --color-status-processing-bg: #f0f0f0;
  --color-status-processing-fg: #333333;
  /* Desfecho informado à mão: no-show e remarcada não são "realizada". */
  --color-status-no-show-bg: #fdecec;
  --color-status-no-show-fg: #c0281c;
  --color-status-moved-bg: #fdf3e3;
  --color-status-moved-fg: #8a5a00;

  /* Gráfico "Desempenho por mentor": uma cor por categoria, na família da
     situação correspondente. O pior caso é o único com listras. */
  --color-perf-registered: var(--color-status-done-fg);
  --color-perf-incomplete: #8fc49c;
  --color-perf-scheduled: var(--color-status-scheduled-fg);
  --color-perf-moved: var(--color-status-moved-fg);
  --color-perf-no-show: var(--color-status-no-show-fg);
  --color-perf-missing: #6f1510;
  --color-perf-other: #d2d2d7;
  --color-danger: #c0281c;
  /* Botões de ação com cor (próximas mentorias): amarelo = reagendar,
     vermelho = cancelar. Texto escuro o bastante para contraste AA no fundo. */
  --color-action-warning-bg: #fff4cc;
  --color-action-warning-bg-hover: #ffeaa3;
  --color-action-warning-border: #f0cf66;
  --color-action-warning-fg: #6b4e00;
  --color-action-danger-bg: #fdecec;
  --color-action-danger-bg-hover: #fbd9d6;
  --color-action-danger-border: #f1b0a9;
  --color-action-danger-fg: #b3261e;
  --color-warning-bg: #fdf3e3;
  --color-warning-fg: #8a5a00;
  --color-warning-border: #f0dcb4;

  /* ---------- Tipografia ---------- */
  /* Em Mac e iPhone, "system-ui" resolve para a própria SF Pro. Inter é o
     substituto para os demais sistemas e vem de arquivos locais. */
  --font-display:
    'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif;
  --font-text: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif;

  --text-hero-size: 56px;
  --text-hero-tracking: -0.28px;
  --text-display-lg-size: 40px;
  --text-display-md-size: 34px;
  --text-lead-size: 28px;
  --text-tagline-size: 21px;
  --text-body-size: 17px;
  --text-body-line: 1.47;
  --text-body-tracking: -0.374px;
  --text-caption-size: 14px;
  /* Rótulo dos botões de modal: entre a legenda e o corpo, para caber duas
     ações lado a lado sem perder a leitura. */
  --text-button-size: 15px;
  --text-caption-tracking: -0.224px;
  --text-fine-size: 12px;
  --text-fine-tracking: -0.12px;
  --text-micro-size: 10px;

  /* A escala de peso do design é 300 / 400 / 600 / 700 — sem 500. */
  --weight-light: 300;
  --weight-regular: 400;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* ---------- Espaçamento ---------- */
  --space-xxs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 17px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-xxl: 48px;
  --space-section: 80px;

  /* ---------- Raios ---------- */
  --radius-none: 0px;
  --radius-xs: 5px;
  --radius-sm: 8px;
  --radius-md: 11px;
  --radius-lg: 18px;
  --radius-pill: 9999px;

  /* ---------- Alturas ---------- */
  --height-global-nav: 44px;
  --height-sub-nav: 52px;
  --height-control: 44px;
  --height-control-sm: 36px;
  --height-input: 48px;

  /* ---------- Movimento ---------- */
  /* O "apertar" de escala 0.95 é a micro-interação padrão do sistema. */
  --press-scale: 0.95;
  --transition-fast: 0.12s ease;
  --transition-base: 0.15s ease;
  /*
   * Curvas e tempos das entradas e saídas. Tudo curto: a plataforma é de
   * trabalho, e movimento que faz esperar vira atrito. Só opacidade e
   * deslocamento — nada de sombra, brilho ou cor piscando.
   */
  --ease-out: cubic-bezier(0.2, 0.7, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --duration-enter: 0.32s;
  --duration-exit: 0.16s;
  --duration-slide: 0.34s;
  --stagger-step: 40ms;

  /* ---------- Elevação ---------- */
  /* O sistema tem UMA sombra só, e ela é para imagem de produto — não para
     cartões, botões ou texto. A profundidade aqui vem da troca de superfície. */
  --shadow-product: rgba(0, 0, 0, 0.22) 3px 5px 30px 0;
  --blur-frosted: saturate(180%) blur(20px);

  /* ---------- Layout ---------- */
  --content-max: 1440px;
  --gutter: 20px;
}