/**
 * GRAPTOS — Design System Tokens (CSS Variables)
 * Version: 1.0
 * Fuente del verdad: docs/brand_guidelines_visual.md
 *
 * Uso:
 *   Importar este archivo como primer hoja de estilos en cualquier
 *   proyecto web o producto de Graptos.
 *
 *   @import './graptos-tokens.css';
 */

:root {

  /* ============================================================
   * 1. COLOR TOKENS — Núcleo Estructural
   * ============================================================ */

  --color-bg-primary:     #121212;  /* Negro Carbono — fondo oscuro principal */
  --color-bg-secondary:   #1A1A1A;  /* Negro profundo — paneles secundarios */
  --color-bg-tertiary:    #222222;  /* Gris UI Oscuro — separadores y cards */

  --color-surface-light:  #F5F5F5;  /* Gris UI Claro — superficies en modo claro */
  --color-surface-white:  #FFFFFF;  /* Blanco Puro */

  --color-text-primary:   #FFFFFF;  /* Texto principal sobre fondo oscuro */
  --color-text-secondary: #A0A0A0;  /* Texto secundario / labels apagados */
  --color-text-inverse:   #121212;  /* Texto sobre fondos claros */

  --color-border:         #2E2E2E;  /* Bordes de separación en dark mode */
  --color-border-light:   #E0E0E0;  /* Bordes en light mode */


  /* ============================================================
   * 2. COLOR TOKENS — Cromática de Estado (Solo uno activo a la vez)
   * ============================================================ */

  /* Estado: Arquitectura / Software Core */
  --color-state-software:     #0055FF;
  --color-state-software-dim: #0040CC;  /* Hover / pressed */

  /* Estado: Inteligencia Artificial */
  --color-state-ai:            #00FF66;
  --color-state-ai-dim:        #00CC52;

  /* Estado: Hardware / Robótica */
  --color-state-hardware:      #FF6600;
  --color-state-hardware-dim:  #CC5200;

  /* Estado: Incubación Creativa / Diseño */
  --color-state-design:        #FF00FF;
  --color-state-design-dim:    #CC00CC;


  /* ============================================================
   * 3. TYPOGRAPHY TOKENS
   * ============================================================ */

  /* Familias */
  --font-primary:   'Space Grotesk', system-ui, sans-serif;  /* Display / Headings */
  --font-secondary: 'Inter', system-ui, sans-serif;           /* Body / UI */
  --font-mono:      'JetBrains Mono', 'Fira Code', monospace; /* Código / Datos técnicos */

  /* Escala tipográfica (base 16px / modular scale 1.25) */
  --text-xs:   0.64rem;   /* 10.24px — Labels micro */
  --text-sm:   0.8rem;    /* 12.8px  — Subtextos */
  --text-base: 1rem;      /* 16px    — Cuerpo base */
  --text-md:   1.25rem;   /* 20px    — UI destacado */
  --text-lg:   1.563rem;  /* 25px    — H3 */
  --text-xl:   1.953rem;  /* 31px    — H2 */
  --text-2xl:  2.441rem;  /* 39px    — H1 */
  --text-3xl:  3.052rem;  /* 49px    — Display */
  --text-4xl:  3.815rem;  /* 61px    — Hero principal */

  /* Pesos */
  --font-weight-regular:   400;
  --font-weight-semibold:  600;
  --font-weight-medium:    500;
  --font-weight-bold:      700;

  /* Interlineado (leading) */
  --leading-tight:  1.15;  /* Títulos grandes */
  --leading-snug:   1.35;  /* Subtítulos */
  --leading-normal: 1.6;   /* Cuerpo de texto */

  /* Tracking (letter-spacing) */
  --tracking-tight:  -0.02em;  /* Cuerpos grandes, display */
  --tracking-normal:  0em;
  --tracking-wide:    0.08em;  /* Labels en mayúsculas, tags */


  /* ============================================================
   * 4. SPACING TOKENS (Base 4px)
   * ============================================================ */

  --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 */
  --space-24: 6rem;      /* 96px */


  /* ============================================================
   * 5. BORDER TOKENS
   * ============================================================ */

  --radius-none: 0;       /* Filosofía: sin bordes redondeados por defecto */
  --radius-sm:   2px;     /* Mínima concesión funcional */
  --radius-md:   4px;     /* Solo en casos excepcionales de accesibilidad */

  /* Grosores */
  --border-width-thin:   1px;
  --border-width-normal: 2px;


  /* ============================================================
   * 6. SHADOW TOKENS (solo sombras duras / paralelas — sin blur)
   * ============================================================ */

  --shadow-sm:  2px 2px 0px #000000;   /* Elevación leve */
  --shadow-md:  4px 4px 0px #000000;   /* Elevación media — botones */
  --shadow-lg:  6px 6px 0px #000000;   /* Elevación alta — modales, cards */

  /* Sombra de acento activo (color de estado actual) */
  --shadow-state: 4px 4px 0px var(--color-state-software); /* Swap según estado */


  /* ============================================================
   * 7. TRANSITION TOKENS
   * ============================================================ */

  --transition-fast:   100ms ease-out;
  --transition-base:   200ms ease-out;
  --transition-slow:   350ms ease-in-out;


  /* ============================================================
   * 8. ICON TOKENS
   * ============================================================ */

  --icon-stroke-width: 1.5px;  /* Trazo monolineal uniforme */
}