/* ===========================================================================
   Berial Systems — tokens de diseño
   Valores EFECTIVOS de la maqueta real (design_reference/index.html <style>).
   Los componentes referencian estos nombres (--bg, --ink, --sage, --cta…).
   Filosofía: verde = sistema, cobre = acción. Nunca blanco ni negro puros.
   =========================================================================== */

:root {
  color-scheme: light;

  /* Superficies y fondos */
  --bg: #F7F4ED;
  --bg-alt: #F0EDE5;
  --surface: #FFFFFF;
  --surface-2: #FAF7F0;
  --surface-muted: #F0EDE5;

  /* Bordes */
  --border: #E8E4DB;
  --border-2: #D8D1C2;
  --hairline: #EFEBE2;

  /* Texto (jerarquía) */
  --ink: #171A16;
  --ink-2: #4A5B4D;
  --ink-3: #7A8C7C;
  --ink-4: #9CA89F;

  /* Marca */
  --sage: #5F7C65;          /* verde salvia = estructura */
  --cta: #2F6A4E;           /* verde bosque = acción */
  --cta-hover: #265c42;
  --accent: #C9824A;        /* cobre = acento/acción secundaria */

  /* Nav (fondo translúcido al hacer scroll) */
  --nav-bg: rgba(247, 244, 237, 0.94);
  --nav-bg-0: rgba(247, 244, 237, 0);

  /* Hero: degradado de legibilidad sobre la animación de cubos */
  --hero-wash: linear-gradient(105deg,
      #F7F4ED 0%, #F7F4ED 30%,
      rgba(247, 244, 237, 0.82) 48%,
      rgba(247, 244, 237, 0.35) 66%,
      rgba(247, 244, 237, 0) 82%);

  /* Fondo de los motivos isométricos (cap de tarjetas de casos) */
  --motif-bg: #EFEBE2;

  /* Tipografía */
  --font-display: 'Manrope', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Escala de espaciado (design system) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 80px;
  --space-10: 120px;

  /* Radios y bordes */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-pill: 999px;
  --border-thin: 1px;
  --border-medium: 1.5px;
  --border-thick: 2px;

  /* Layout */
  --container: 1200px;
  --container-pad: 48px;
  --nav-h: 68px;
}

[data-theme="dark"] {
  color-scheme: dark;

  --bg: #0F1411;
  --bg-alt: #171D18;
  --surface: #1A211B;
  --surface-2: #222A23;
  --surface-muted: #161C17;

  --border: #2C362E;
  --border-2: #384A3B;
  --hairline: #242E26;

  --ink: #F2EFE7;
  --ink-2: #C4CBBF;
  --ink-3: #8EA894;
  --ink-4: #6F8472;

  --sage: #8EA894;
  --cta: #3C8160;
  --cta-hover: #49986f;
  --accent: #D08A50;

  --nav-bg: rgba(15, 20, 17, 0.92);
  --nav-bg-0: rgba(15, 20, 17, 0);

  --hero-wash: linear-gradient(105deg,
      #0F1411 0%, #0F1411 30%,
      rgba(15, 20, 17, 0.82) 48%,
      rgba(15, 20, 17, 0.35) 66%,
      rgba(15, 20, 17, 0) 82%);

  --motif-bg: #161C17;
}