/**
 * GR58 Design System - tokens.css
 * Paleta primitiva, tokens semánticos, tipografía, espaciado y radios.
 * Prohibido hardcodear colores o tamaños fuera de estas variables.
 */

:root {
  /* 1. PALETA PRIMITIVA (Regla de oro: 60% claros, 25% verdes, 10% ámbar, 5% naranja) */
  --c-chalk: #F6F4F1;   /* Contraste 19.13:1 */
  --c-dawn: #ECE2CE;    /* Contraste 16.34:1 */
  --c-gold: #F2B635;    /* Sneezeweeds - Contraste 11.52:1 */
  --c-orange: #E45C10;  /* Tobiko Orange - Contraste 3.60:1 (Solo acción/superficie) */
  --c-olive: #4B5D16;   /* Kyuri Green - Contraste 7.30:1 */
  --c-forest: #223300;  /* Blind Forest - Contraste 13.62:1 */

  /* 2. TOKENS SEMÁNTICOS */
  --bg-base: var(--c-chalk);
  --bg-alt: var(--c-dawn);
  --bg-invert: var(--c-forest);
  --bg-accent: var(--c-olive);
  --bg-card: #FFFFFF;
  --bg-card-glass: rgba(255, 255, 255, 0.85);

  --text-primary: var(--c-forest);
  --text-secondary: var(--c-olive);
  --text-on-dark: var(--c-chalk);
  --text-muted: rgba(34, 51, 0, 0.80);      /* Blind Forest al 80% */
  --text-muted-dark: rgba(246, 244, 241, 0.85); /* White Chalk al 85% */

  --brand-primary: var(--c-olive);
  --brand-accent: var(--c-orange);
  --brand-highlight: var(--c-gold);
  --border-subtle: var(--c-dawn);
  --focus-ring: var(--c-gold);

  /* Series para gráficos de datos (Orden obligatorio GR58) */
  --chart-s1: var(--c-olive);
  --chart-s2: var(--c-orange);
  --chart-s3: var(--c-gold);
  --chart-s4: var(--c-forest);
  --chart-s5: var(--c-dawn);

  /* Estados de simulación */
  --state-success: var(--c-olive);
  --state-alert: var(--c-gold);
  --state-critical: var(--c-orange);
  --state-neutral: var(--c-dawn);

  /* 3. TIPOGRAFÍA Y ESCALA FLUIDA */
  --font-family-base: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-family-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;

  --font-size-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.8125rem);      /* 12 - 13px */
  --font-size-sm: clamp(0.8125rem, 0.78rem + 0.3vw, 0.875rem);     /* 13 - 14px */
  --font-size-base: clamp(0.9375rem, 0.9rem + 0.35vw, 1.0625rem);  /* 15 - 17px */
  --font-size-md: clamp(1.0625rem, 1rem + 0.4vw, 1.1875rem);       /* 17 - 19px */
  --font-size-lg: clamp(1.25rem, 1.15rem + 0.6vw, 1.5rem);         /* 20 - 24px */
  --font-size-xl: clamp(1.5rem, 1.35rem + 0.8vw, 1.875rem);        /* 24 - 30px */
  --font-size-2xl: clamp(1.875rem, 1.6rem + 1.2vw, 2.375rem);      /* 30 - 38px */
  --font-size-3xl: clamp(2.25rem, 1.9rem + 1.8vw, 3.25rem);        /* 36 - 52px */

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  --line-height-tight: 1.15;
  --line-height-snug: 1.3;
  --line-height-base: 1.6;

  /* 4. ESPACIADO */
  --space-1: 0.25rem;  /* 4px */
  --space-2: 0.5rem;   /* 8px */
  --space-3: 0.75rem;  /* 12px */
  --space-4: 1rem;     /* 16px */
  --space-5: 1.25rem;  /* 20px */
  --space-6: 1.5rem;   /* 24px */
  --space-8: 2rem;     /* 32px */
  --space-10: 2.5rem;  /* 40px */
  --space-12: 3rem;    /* 48px */
  --space-16: 4rem;    /* 64px */
  --space-20: 5rem;    /* 80px */

  /* 5. RADIOS DE BORDE */
  --radius-sm: 8px;
  --radius-form: 12px;       /* 12px obligatorio para formularios */
  --radius-card: 20px;       /* Esquinas muy redondeadas para tarjetas */
  --radius-pill: 9999px;     /* Píldora completa para botones CTA */

  /* 6. SOMBRAS Y ELEVACIONES */
  --shadow-subtle: 0 4px 16px rgba(34, 51, 0, 0.06);
  --shadow-card: 0 10px 30px rgba(34, 51, 0, 0.08);
  --shadow-hover: 0 14px 36px rgba(34, 51, 0, 0.14);
  --shadow-glow-accent: 0 0 24px rgba(228, 92, 16, 0.35);

  /* 7. DEGRADADOS AUTORIZADOS */
  --grad-brand: linear-gradient(135deg, var(--c-olive) 0%, var(--c-forest) 100%);
  --grad-energy: linear-gradient(120deg, var(--c-gold) 0%, var(--c-orange) 100%);
  --grad-subtle-bg: linear-gradient(180deg, var(--c-chalk) 0%, var(--c-dawn) 100%);

  /* 8. CONTENEDOR Y Z-INDEX */
  --container-max-w: 1240px;
  --z-nav: 1000;
  --z-modal: 2000;

  /* 9. TRANSICIONES */
  --trans-fast: 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  --trans-base: 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Modo Oscuro Accesible */
[data-theme="dark"] {
  --bg-base: var(--c-forest);
  --bg-alt: var(--c-olive);
  --bg-invert: var(--c-chalk);
  --bg-card: rgba(34, 51, 0, 0.7);
  --text-primary: var(--c-chalk);
  --text-secondary: var(--c-gold);
  --text-muted: rgba(246, 244, 241, 0.85);
  --border-subtle: rgba(75, 93, 22, 0.5);
}