/*
 * Tokens de design. A geometria da marca vem das capturas aprovadas de 1440px,
 * guardadas no histórico em 74635fc:site/design/.
 * A tipografia separa apresentação, leitura e interface, conforme o estudo aprovado.
 * A base é comum; cada idioma troca apenas os acentos, sempre pelos tokens.
 */
:root {
  /* Color: shared base */
  --bg: #FFF8EC;
  --surface: #FFFFFF;
  --surface-muted: #F3EEE4;
  --ink: #141414;
  --ink-muted: #5A5346;
  --rails: #D30001;
  --success: #137A3D;
  --success-surface: #EDF8F0;
  --ramp-stop-1: #440154;
  --ramp-stop-2: #3B528B;
  --ramp-stop-3: #21918C;
  --ramp-stop-4: #5EC962;
  --ramp-stop-5: #FDE725;
  --member-tint: var(--surface-muted);
  --rail-tie: #E6D8BF;
  --pending: #B9AD96;
  --terminal-comment: #A39B8B;
  --terminal-text: #FFFFFF;
  --terminal-rule: #3A3A3A;
  --terminal-dot-1: var(--rails);   /* the three dots keep the colors of the capture in both languages */
  --terminal-dot-2: #FFDF00;
  --terminal-dot-3: #009C3B;
  --on-accent: #FFFFFF;
  --topbar-bg: var(--ink);
  --topbar-fg: var(--surface);
  --panel-bg: var(--ink);
  --panel-text: #E9E4DA;

  /* Type */
  --font-display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-hand: "Caveat", "Comic Sans MS", cursive;

  /* Apresentação, leitura contínua e interface: tamanhos por papel, não por nível HTML. */
  --fs-impact: clamp(3rem, 2rem + 5vw, 6.5rem);             /* 48–104px */
  --fs-section: clamp(2.25rem, 1.8rem + 2.3vw, 4rem);      /* 36–64px */
  --fs-editorial-title: clamp(2rem, 1.5rem + 1.7vw, 3rem); /* 32–48px */
  --fs-ui-title: clamp(2rem, 1.75rem + .85vw, 2.5rem);     /* 32–40px */
  --fs-card-title: clamp(1.5rem, 1.35rem + .45vw, 1.75rem); /* 24–28px */
  --fs-reading: clamp(1.125rem, 1rem + .28vw, 1.25rem);    /* 18–20px */
  --fs-reading-lead: clamp(1.125rem, 1rem + .42vw, 1.375rem); /* 18–22px */
  --fs-ui-body: clamp(1rem, .95rem + .2vw, 1.125rem);      /* 16–18px */
  --fs-control: 1rem;                                    /* 16px */
  --fs-control-large: 1.125rem;                           /* 18px */
  --fs-caption: .875rem;                                 /* 14px */
  --fs-chapter-title: 1.5rem;                            /* 24px: título de capítulo do manifesto */

  /* Marca: tamanhos fixos das peças de identidade. */
  --fs-topbar: 1.375rem;                                 /* 22px: faixa do topo */
  --fs-brand: 1.5rem;                                    /* 24px: nome no cabeçalho e @ no rodapé */

  --fw-body: 400;
  --fw-ui: 600;
  --fw-title: 700;
  --lh-impact: .98;
  --lh-title: 1.08;
  --lh-ui-title: 1.15;
  --lh-body: 1.6;
  --lh-ui: 1.5;
  --lh-caption: 1.4;
  --reading-measure: 62ch;

  /* Nomes compatíveis mantêm os exemplos e as views existentes na mesma escala de papéis. */
  --fs-display: var(--fs-impact);
  --fs-page: var(--fs-editorial-title);
  --fs-h2: var(--fs-section);
  --fs-h2-large: var(--fs-section);
  --fs-h2-medium: var(--fs-editorial-title);
  --fs-h3: var(--fs-card-title);
  --fs-h4: var(--fs-card-title);
  --fs-family: var(--fs-card-title);
  --fs-name: var(--fs-card-title);
  --fs-lead: var(--fs-reading);
  --fs-lead-2: var(--fs-reading-lead);
  --fs-body: var(--fs-reading);
  --fs-small: var(--fs-ui-body);
  --fs-xs: var(--fs-control);
  --fs-step: var(--fs-ui-body);
  --fs-micro: var(--fs-caption);
  --fs-metric-xl: clamp(5rem, 3rem + 6vw, 8.125rem);        /* 130px */
  --fs-metric-unit: clamp(2rem, 1.4rem + 1.9vw, 3rem);      /* 48px */
  --fs-metric-l: clamp(2.25rem, 1.8rem + 1.1vw, 2.75rem);     /* 44px */
  --fs-metric-m: 2.25rem;                                   /* 36px: notas da evidência no manifesto */
  --fs-code-small: .9375rem;                                /* 15px: snippet e contador de estrelas */
  --fs-code: 1rem;
  --fs-code-large: 1.25rem;                                 /* 20px: número do passo e assinatura */

  /* O gráfico é SVG: o tamanho fica em unidades do viewBox e escala com ele. */
  --fs-chart-title: 23px;
  --fs-chart-label: 14px;
  --fs-ui: var(--fs-control);
  --fs-hand: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem);        /* 40px */

  --tracking-display: -.015em;
  --tracking-title: -.01em;

  /* Space and shape */
  --container: 1200px;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --section-pad-y: clamp(4rem, 2.5rem + 4.5vw, 6.25rem);    /* 100px */
  --gap: clamp(1.25rem, 1rem + 1.2vw, 2.5rem);             /* 40px */
  --topbar-h: 52px;
  --border: 3px;
  --border-thin: 2px;
  --radius-card: 24px;
  --radius-panel: 30px;
  --radius-btn: 12px;
  --radius-pill: 999px;
  --shadow-hard: 8px 8px 0 var(--ink);
  --shadow-button: 6px 6px 0 var(--ink);
  --shadow-panel: 12px 12px 0 var(--ink);
  --focus: var(--accent-3);

  /* Vertical space scale */
  --space-xs: .5rem;
  --space-s: .75rem;
  --space-m: 1rem;
  --space-l: 1.5rem;
  --space-xl: 3rem;
  --target-size: 2.75rem;
  --admin-sidebar-width: 17rem;
}

/* EN: the global brand. Electric blue, black band, pink highlight. */
:root:lang(en) {
  --ramp-stop-1: #182555;
  --ramp-stop-2: #1B4DFF;
  --ramp-stop-3: #9279CD;
  --ramp-stop-4: #CE9DCF;
  --ramp-stop-5: #FFD0C9;
  --accent: #1B4DFF;
  --accent-fill: #1B4DFF;
  --accent-hover: #1238C4;
  --accent-2: #141414;
  --accent-3: #1742D9;
  --highlight: #FDB3A9;
  --sticker: #CFE0FF;
  --topbar-star: var(--rails);
  --rail: var(--ink);
  --panel-title: var(--highlight);
  --terminal-shadow: var(--rails);
  --terminal-prompt: #FF5A4E;
}

/* PT-BR: the Brazilian brand. Shared black surfaces, green actions and yellow highlights. */
:root:lang(pt-BR) {
  --accent: #009C3B;
  --accent-fill: #00843D;  /* the captures fill every button with the darker green: white text passes AA */
  --accent-hover: #006B31;
  --accent-2: #FFDF00;
  --accent-3: #002776;
  --highlight: #FFDF00;
  --sticker: #FFE45C;
  --topbar-star: var(--accent-2);
  --rail: var(--accent);
  --panel-title: var(--accent-2);
  --terminal-shadow: var(--accent);
  --terminal-prompt: var(--accent-2);
}