/* ============================================================================
   RavenCoreX — Design Tokens (v4 · aligned to branding v2.0)
   CANONICAL SOURCE: natalia-team/knowledge/branding/design-tokens.md §5
   This :root + [data-theme="dark"] block is copied verbatim from that file.
   Convention: --color-* / --space-* / --text-* / --font-* / --duration-* /
   --easing-* / --radius / --gradient-firmado / --container-max / --icon-stroke.
   Golden rules: radius 0 always · no improvised hexcodes · warm accent is
   minimal and not yet used on any surface · cards without shadow.
   ============================================================================ */

:root {
  /* ===== COLOR · PRIMARIA (v1, inamovible) ===== */
  --color-azure:  #0c82f5;
  --color-malibu: #6fd2fc;
  --color-carbon: #1a1f24;
  --color-blanco: #ffffff;

  /* ===== COLOR · ESCALA AZURE (v1) ===== */
  --color-azure-50:  #e6f2fe;
  --color-azure-100: #cee6fd;
  --color-azure-300: #54a7f8;
  --color-azure-500: #0c82f5;
  --color-azure-700: #0968c4;
  --color-azure-900: #043462;
  --color-azure-950: #032749;

  /* ===== COLOR · ESCALA MALIBU (v1) ===== */
  --color-malibu-50:  #f0fafe;
  --color-malibu-100: #e2f6fe;
  --color-malibu-300: #9adffc;
  --color-malibu-500: #6fd2fc;
  --color-malibu-700: #58a8c9;
  --color-malibu-900: #2c5464;
  --color-malibu-950: #213f4b;

  /* ===== COLOR · NEUTRALES (v1) ===== */
  --color-neutral-0:   #ffffff;
  --color-neutral-50:  #f2f2f2;
  --color-neutral-200: #d8d9da;
  --color-neutral-300: #b2b4b6;
  --color-neutral-500: #808385;
  --color-neutral-700: #4d5154;
  --color-neutral-800: #1a1f24;
  --color-neutral-950: #01070c;

  /* ===== COLOR · ACENTOS POR UNIDAD (v2, cerrado) ===== */
  --color-unit-data:     #0c82f5; /* = azure */
  --color-unit-agents:   #6fd2fc; /* = Malibu */
  --color-unit-products: #3B3FB6; /* Cobalt-Indigo */
  --color-indigo-50:  #EEEEFB;
  --color-indigo-100: #D4D5F4;
  --color-indigo-500: #3B3FB6;
  --color-indigo-700: #2B2E8C;
  --color-indigo-900: #1A1C5C;

  /* ===== COLOR · SEMÁNTICOS (v1) ===== */
  --color-success:    #0E9F6E;
  --color-success-bg: #E6F6EF;
  --color-warning:    #B45309; /* hermano cromático del cálido: nunca en el mismo componente */
  --color-warning-bg: #FCF3E6;
  --color-error:      #B91C1C;
  --color-error-bg:   #FBE9E9;
  --color-info:       #0c82f5; /* = azure */

  /* ===== COLOR · ACENTO CÁLIDO / TERRACOTA (v2, CERRADO) ===== */
  /* Mínimo y acotado: Laura, onboarding, cuidado, señal humana. <=5% superficie. */
  /* Texto blanco sobre fill: warm-500 pasa AA (5.18); warm-600 da holgura. Dark => warm-300. */
  --color-warm-50:  #FCF1EA;
  --color-warm-100: #F6E0D3;
  --color-warm-200: #EEC3A9;
  --color-warm-300: #E07A4B; /* acento cálido en DARK (AA 5.58:1 sobre carbón) */
  --color-warm-400: #D15A28;
  --color-warm-500: #C2410C; /* anchor — fill+texto blanco AA 5.18:1 */
  --color-warm-600: #A8390A; /* fill + label blanco AA 6.45:1 */
  --color-warm-700: #9A330A; /* texto cálido sobre claro AAA 7.36:1 */
  --color-warm-800: #7A2807;
  --color-warm-900: #561C05;

  /* ===== COLOR · ALIAS SEMÁNTICOS DE UI (light) ===== */
  --color-bg:             #ffffff;
  --color-bg-subtle:      #f2f2f2;
  --color-surface:        #ffffff;
  --color-text:           #1a1f24;
  --color-text-secondary: #4d5154;
  --color-text-muted:     #808385;
  --color-border:         #d8d9da;
  --color-border-strong:  #b2b4b6;
  --color-primary:        #0c82f5;
  --color-primary-hover:  #0968c4;
  --color-link:           #0968c4;
  --color-accent:         #6fd2fc;
  --color-focus-ring:     #54a7f8;

  /* ===== GRADIENTE FIRMADO (v1, inamovible) ===== */
  --gradient-firmado: linear-gradient(135deg, #0c82f5 0%, #6fd2fc 100%);

  /* ===== TIPOGRAFÍA · FAMILIAS (v1) ===== */
  --font-display: "Sora", sans-serif;
  --font-body:    "Montserrat", sans-serif;
  --font-mono:    "JetBrains Mono", monospace;

  /* ===== TIPOGRAFÍA · TAMAÑOS (v1) ===== */
  --text-display:  7.5rem;    /* 120px */
  --text-h1:       6rem;      /* 96px */
  --text-h2:       4rem;      /* 64px */
  --text-h3:       2.5rem;    /* 40px */
  --text-h4:       1.75rem;   /* 28px */
  --text-h5:       1.25rem;   /* 20px */
  --text-overline: 0.875rem;  /* 14px */
  --text-body-lg:  1.125rem;  /* 18px */
  --text-body:     1rem;      /* 16px */
  --text-body-sm:  0.875rem;  /* 14px */
  --text-caption:  0.75rem;   /* 12px */
  --text-label:    0.75rem;   /* 12px */
  --text-button:   1rem;      /* 16px */
  --text-code:     0.875rem;  /* 14px */

  /* ===== TIPOGRAFÍA · LINE-HEIGHTS (v1) ===== */
  --leading-display: 1.0;
  --leading-h1:      1.05;
  --leading-h2:      1.1;
  --leading-h3:      1.2;
  --leading-h4:      1.3;
  --leading-h5:      1.4;
  --leading-body:    1.6;
  --leading-body-sm: 1.5;
  --leading-tight:   1.0;  /* labels, buttons */

  /* ===== TIPOGRAFÍA · LETTER-SPACING (v1) ===== */
  --tracking-display:  -0.025em;
  --tracking-h1:       -0.02em;
  --tracking-h2:       -0.015em;
  --tracking-h3:       -0.01em;
  --tracking-h4:       -0.005em;
  --tracking-normal:   0;
  --tracking-overline: 0.08em; /* uppercase kickers, labels */
  --tracking-caption:  0.02em;

  /* ===== TIPOGRAFÍA · PESOS ===== */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* ===== ESPACIADO (v1, base 8px) ===== */
  --space-3xs: 4px;
  --space-2xs: 8px;
  --space-xs:  12px;
  --space-sm:  16px;
  --space-md:  24px;
  --space-lg:  32px;
  --space-xl:  48px;
  --space-2xl: 64px;
  --space-3xl: 96px;
  --space-4xl: 128px;

  /* ===== GRID / BREAKPOINTS (v1) ===== */
  --container-max: 1280px;
  --gutter-desktop: 24px;
  --gutter-mobile:  16px;
  --bp-sm:  375px;
  --bp-md:  768px;
  --bp-lg:  1024px;
  --bp-xl:  1280px;
  --bp-2xl: 1440px;

  /* ===== RADIUS (v1, inamovible) ===== */
  --radius: 0; /* esquinas vivas = marca. No redondear. */

  /* ===== SOMBRAS (uso puntual; cards van sin sombra) ===== */
  --shadow-sm: 0 1px 2px rgba(26,31,36,0.08);
  --shadow-md: 0 4px 12px rgba(26,31,36,0.12);
  --shadow-lg: 0 12px 32px rgba(26,31,36,0.18);

  /* ===== MOTION (v1 §7.2) ===== */
  --duration-hover:   150ms;
  --duration-tooltip: 200ms;
  --duration-modal:   250ms;
  --duration-page:    300ms;
  --duration-stroke:  700ms;
  --easing-out:    cubic-bezier(0, 0, 0.2, 1);
  --easing-in:     cubic-bezier(0.4, 0, 1, 1);
  --easing-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* ===== ICONOGRAFÍA (v1 §5) ===== */
  --icon-stroke: 1px; /* Phosphor Thin, linecap square, linejoin miter, fill none */

  /* ==========================================================================
     EXTENSIÓN DE IMPLEMENTACIÓN (no son nuevos hexcodes — todos apuntan a
     primitivos/valores del :root oficial de arriba). Cubren tokens que el
     stack v4 necesita y que la §5 no nombra igual: roles de texto/superficie
     adicionales, layout, z-index y un duration de shimmer. Mantienen el render
     idéntico; ningún color nuevo se introduce.
     ========================================================================== */

  /* Roles de texto/superficie adicionales */
  --color-text-invert: var(--color-neutral-0);   /* texto sobre superficies oscuras */
  --color-bg-dark:      var(--color-neutral-800); /* superficie carbón */
  --color-bg-darkest:   var(--color-neutral-950); /* fondo más profundo */

  /* Layout (v1 §8.2) */
  --grid-columns: 12;
  --gutter:       24px;   /* = --gutter-desktop */
  --margin:       64px;   /* margen lateral desktop */
  --measure:      720px;  /* longitud de línea editorial (~60-75ch) */

  /* Z-index */
  --z-nav:     1000;
  --z-overlay: 1005;
  --z-mega:    1010;

  /* Motion — shimmer (uso puntual) */
  --duration-shimmer: 1200ms;
}

/* ===== DARK MODE (carbón base) ===== */
/* Acento cálido en dark = warm-300 (AA 5.58:1 sobre carbón). */
[data-theme="dark"] {
  --color-bg:             #01070c; /* neutral-950 */
  --color-bg-subtle:      #1a1f24; /* carbón */
  --color-surface:        #1a1f24;
  --color-text:           #ffffff;
  --color-text-secondary: #d8d9da; /* neutral-200 */
  --color-text-muted:     #b2b4b6; /* neutral-300 */
  --color-border:         #4d5154; /* neutral-700 */
  --color-border-strong:  #808385; /* neutral-500 */
  --color-primary:        #54a7f8; /* azure-300 lidera en dark por contraste */
  --color-primary-hover:  #6fd2fc; /* Malibu */
  --color-link:           #54a7f8;
  --color-accent:         #6fd2fc;
  --color-focus-ring:     #6fd2fc;
  --color-warm-accent:    #E07A4B; /* warm-300, acento cálido en dark */
}