/* C-Power — design tokens (fuente: design-system/project/tokens.json) */
@import url("https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@62..125,100..900&family=IBM+Plex+Mono:wght@400;500&display=swap");

:root,
[data-theme="papel"] {
  /* Marca */
  --brand-red: #ff1e22;        /* rojo del logo: marca, rellenos, tipografía ≥24px */
  --brand-red-text: #c8101a;   /* rojo para texto pequeño y enlaces sobre fondos claros */
  --brand-ink: #0e0f10;        /* negro del logo */
  --on-brand-red: #0e0f10;     /* texto sobre rojo (4.99:1) */

  /* Pacífico */
  --pacific-900: #0b2233;
  --pacific-700: #173a55;
  --pacific-300: #8fb3c9;

  /* Neutros */
  --steel-300: #b4b3b1;        /* gris heredado del sitio original */

  /* Roles (tema claro "papel") */
  --surface-base: #f4f2ee;
  --surface-raised: #ffffff;
  --surface-sunken: #e9e6e0;
  --text-primary: #0e0f10;
  --text-secondary: #62676d;
  --border-hairline: #cfccc6;
  --border-strong: #0e0f10;
  --focus-ring: #c8101a;

  /* Tipografía */
  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --stretch-display: 125%;     /* Archivo expandida: eco del logotipo extendido */
  --stretch-heading: 112%;

  --text-display-xl: clamp(2.75rem, 1.2rem + 6.2vw, 6.75rem);
  --text-display-l: clamp(2.25rem, 1.4rem + 3.6vw, 4.25rem);
  --text-heading-m: clamp(1.5rem, 1.2rem + 1.1vw, 2rem);
  --text-heading-s: 1.25rem;
  --text-body-l: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
  --text-body: 1rem;
  --text-caption: 0.875rem;
  --text-label: 0.75rem;

  /* Espaciado — base 4px */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --space-32: 128px;

  /* Radios — esquinas apenas suavizadas, como las del logotipo */
  --radius-none: 0;
  --radius-sm: 3px;
  --radius-md: 6px;

  /* Líneas */
  --rule-hairline: 1px;
  --rule-route: 2px;
  --rule-heavy: 6px;

  /* Layout */
  --measure: 62ch;
  --container: 1240px;
  --gutter: clamp(20px, 4vw, 48px);

  /* Movimiento */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-fast: 160ms;
  --dur-base: 320ms;
  --dur-slow: 1400ms;
}

[data-theme="tinta"] {
  --brand-red-text: #ff1e22;
  --surface-base: #0e0f10;
  --surface-raised: #17191b;
  --surface-sunken: #070808;
  --text-primary: #f4f2ee;
  --text-secondary: #b4b3b1;
  --border-hairline: #2e3236;
  --border-strong: #f4f2ee;
  --focus-ring: #ff1e22;
}

[data-theme="pacifico"] {
  --brand-red-text: #ff6669;
  --surface-base: #0b2233;
  --surface-raised: #173a55;
  --surface-sunken: #071824;
  --text-primary: #f4f2ee;
  --text-secondary: #8fb3c9;
  --border-hairline: #24506f;
  --border-strong: #f4f2ee;
  --focus-ring: #ff6669;
}