/* ============================================================
   Maré · tokens de marca — ÚNICA fonte de verdade do sistema visual
   Consomem este arquivo: apps/instrutor (Tailwind 4, @theme inline), apps/remador,
   site/public (landing, guia, privacidade), docs/marca/design-system.html.
   Decisões de 2026-10-12 (Javier): cantos curtos como a M (nada de pílulas), tipo um
   degrau menor e pesos até 700, uma só tinta de avatar, cores de apoio só em texto e
   filete (sem fundos pastel), céu da remada como fundo vivo, iso sempre presente.
   Sincronizar cópias: node packages/marca/sync.mjs
   ============================================================ */
:root {
  /* ---- cor · base ---- */
  --bg: #F2F5F7;        /* gelo */
  --card: #FFFFFF;
  --line: #D6E0E6;
  --ink: #0B2436;       /* azul-tinta */
  --muted: #5B6E7C;
  --ice: #EAF3F7;       /* gelo sobre azul profundo / fundos de apoio */
  --ice-2: #C9D9E3;     /* controle desligado, alça da folha */
  --muted-2: #9BB0BD;   /* numeração, chevron: nunca um cinza neutro, sempre com tinta da marca */
  --on-dark: #EAF3F7;   /* texto sobre deep, framboesa e céu (gelo, não branco puro) */
  /* ---- cor · marca ---- */
  --deep: #0A2E44;      /* azul antártico */
  --deep-2: #134B66;
  --glacial: #7FD8E6;
  --accent: #A93251;    /* framboesa: marca (iso, nome, aba ativa) e o único aviso de atenção por tela; NUNCA botão nem link (lê como perigo) */
  --accent-2: #8E2741;
  --action: var(--deep);   /* botão primário e ação decisiva */
  --link: var(--deep-2);   /* links e rótulos de bloco */
  /* ---- cor · semânticas (só texto, traço e filete; nunca fundo pastel) ---- */
  --green: #1F8A5B;  --green-line: #BFDCCB;
  --amber: #C7811A;  --amber-line: #E8D3B3;
  --red:   #C2412D;  --red-line:   #EBC7C1;
  --accent-line: #E3BFC9;
  /* ---- avatar: uma só família ---- */
  --av-bg: #E3ECF1; --av-fg: #134B66;
  --me-bg: #E6EFF4; /* a sua fila na lista */
  /* ---- tipo ---- */
  --font: Outfit, system-ui, -apple-system, sans-serif;
  --text-2xs: 10px; --text-xs: 11px; --text-sm: 12px; --text-base: 13px; --text-md: 14px; --text-lg: 15px;
  --text-xl: 16.5px; --text-2xl: 18px; --text-3xl: 21px; --text-4xl: 24px; --text-5xl: 28px; --text-6xl: 32px; --text-7xl: 44px;
  --text-display: 52px; /* só o nome «maré» na abertura e em capas */
  --w-regular: 400; --w-medium: 500; --w-semibold: 600; --w-bold: 700; /* 800 só no nome «maré» */
  --track-display: -0.02em; --track-label: 0.12em;
  /* ---- cantos (a M: raio 2 em 98) ---- */
  --r-xs: 2px; --r-sm: 4px; --r-md: 6px; --r-lg: 8px; --r-xl: 10px; --r-2xl: 12px;
  --r-pill: 6px; /* chips, toasts: retângulo curto, não pílula */
  /* só duas coisas são redondas (Javier, 2026-10-13): a foto de perfil e o switch */
  --r-av: 50%;
  --r-switch: 999px;
  /* ---- espaço ---- */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px;
  /* ---- sombra ---- */
  --sh-card: 0 1px 2px rgba(10,46,68,.06), 0 8px 24px -16px rgba(10,46,68,.28);
  --sh-float: 0 12px 32px -12px rgba(10,46,68,.4);
  /* ---- céu: fundo quando não há WebGL ---- */
  --sky: linear-gradient(170deg, #0A2E44 0%, #134B66 100%);

  /* ---- aliases shadcn/ui (apps React) ---- */
  --background: var(--bg); --foreground: var(--ink);
  --card-foreground: var(--ink);
  --popover: var(--card); --popover-foreground: var(--ink);
  --primary: var(--deep); --primary-foreground: #FFFFFF;
  --secondary: var(--ice); --secondary-foreground: var(--deep);
  --muted-foreground: var(--muted);
  --accent-foreground: #FFFFFF;
  --destructive: var(--red); --destructive-foreground: #FFFFFF;
  --border: var(--line); --input: var(--line); --ring: var(--deep-2);
  --radius: var(--r-xl);
}
.dark {
  --bg: #071A27; --card: #0D2637; --line: #1E3B4D; --ink: #EAF3F7; --muted: rgba(234,243,247,.6); --ice: #10304A;
  --accent: #D4557A; --accent-line: #6B2F44;
  --green-line: #1E5A3E; --amber-line: #6B4A1C; --red-line: #6B2A22;
  --av-bg: #16405A; --av-fg: #BFE3F0; --me-bg: #10304A;
  --primary: #EAF3F7; --primary-foreground: #0A2E44;
  --secondary: #10304A; --secondary-foreground: #EAF3F7;
  --sh-card: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px -16px rgba(0,0,0,.6);
}