/* Gino Molinari: tokens de marca v0.2.0
   Aplicar: <link rel="stylesheet" href="tokens.css"> y usar las variables.
   Fuentes: o bien Google Fonts (la @import de abajo) o bien los TTF de brand/fonts
   con las @font-face comentadas al final. Fuente de verdad: tokens.json. */

@import url("https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&family=Bricolage+Grotesque:opsz,wdth,wght@12..96,75..100,400..800&family=Martian+Mono:wdth,wght@100,400..700&family=Press+Start+2P&display=swap");

:root {
  /* color */
  --gm-ink: #17163F;
  --gm-paper: #F1F2F6;
  --gm-blue: #2B3FD6;
  --gm-blue-deep: #1C2A99;
  --gm-blue-soft: #8C9BFF;
  --gm-tomato: #F0502D;
  --gm-tomato-deep: #C7361A;
  --gm-cheese: #FFC53A;
  --gm-cheese-deep: #D99A12;
  --gm-phosphor: #3BD68F;

  /* roles (tema claro) */
  --gm-bg: var(--gm-paper);
  --gm-fg: var(--gm-ink);
  --gm-link: var(--gm-blue);
  --gm-accent: var(--gm-tomato);
  --gm-accent-text: var(--gm-tomato-deep); /* tomate apto para texto pequeño */
  --gm-button-bg: var(--gm-blue);
  --gm-button-fg: var(--gm-paper);
  --gm-button-hover: var(--gm-blue-deep);

  /* tipografía */
  --gm-font-display: "Bricolage Grotesque", "Arial Narrow", sans-serif;
  --gm-font-text: "Atkinson Hyperlegible", system-ui, sans-serif;
  --gm-font-mono: "Martian Mono", ui-monospace, monospace;
  --gm-font-pixel: "Press Start 2P", ui-monospace, monospace;
  --gm-display-settings: "wdth" 75, "opsz" 96;
  --gm-display-weight: 800;
  --gm-display-tracking: -0.01em;

  /* escala tipográfica (Bringhurst) */
  --gm-size-12: 0.75rem;
  --gm-size-14: 0.875rem;
  --gm-size-16: 1rem;
  --gm-size-18: 1.125rem;
  --gm-size-21: 1.3125rem;
  --gm-size-24: 1.5rem;
  --gm-size-36: 2.25rem;
  --gm-size-48: 3rem;
  --gm-size-60: 3.75rem;
  --gm-size-72: 4.5rem;
  --gm-size-96: 6rem;

  /* forma */
  --gm-radius-sm: 4px;
  --gm-radius-md: 10px;
  --gm-radius-key: 18px;
  --gm-radius-pill: 999px;
  --gm-shadow-pixel: 4px 4px 0 var(--gm-ink);
  --gm-shadow-pixel-lg: 8px 8px 0 var(--gm-ink);
  --gm-stripes: linear-gradient(var(--gm-tomato) 0 30%, transparent 30% 35%, var(--gm-cheese) 35% 65%, transparent 65% 70%, var(--gm-blue) 70% 100%);
}

/* tema oscuro: fondo tinta */
[data-theme="dark"] {
  --gm-bg: var(--gm-ink);
  --gm-fg: var(--gm-paper);
  --gm-link: var(--gm-blue-soft);
  --gm-accent: var(--gm-cheese);
  --gm-accent-text: var(--gm-cheese);
  --gm-button-bg: var(--gm-cheese);
  --gm-button-fg: var(--gm-ink);
  --gm-button-hover: #FFD66E;
  --gm-shadow-pixel: 4px 4px 0 var(--gm-tomato);
  --gm-shadow-pixel-lg: 8px 8px 0 var(--gm-tomato);
}

/* utilidades mínimas */
.gm-display {
  font-family: var(--gm-font-display);
  font-weight: var(--gm-display-weight);
  font-variation-settings: var(--gm-display-settings);
  letter-spacing: var(--gm-display-tracking);
  line-height: 0.95;
}
.gm-mono { font-family: var(--gm-font-mono); }
.gm-pixel { font-family: var(--gm-font-pixel); line-height: 1.4; }

/* Fuentes locales (sin Google): copiar brand/fonts junto a este fichero.
@font-face { font-family: "Bricolage Grotesque"; src: url("fonts/BricolageGrotesque[opsz,wdth,wght].ttf") format("truetype"); font-weight: 200 800; font-stretch: 75% 100%; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url("fonts/AtkinsonHyperlegible-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url("fonts/AtkinsonHyperlegible-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Martian Mono"; src: url("fonts/MartianMono[wdth,wght].ttf") format("truetype"); font-weight: 100 800; font-display: swap; }
@font-face { font-family: "Press Start 2P"; src: url("fonts/PressStart2P-Regular.ttf") format("truetype"); font-display: swap; }
*/