/*
 * tokens.css — Design System Tokens
 * Kinik Labs · Sitio corporativo
 *
 * Paleta de firma: #09c74e → #0985c7 (degradado "línea de aliento")
 * Tipografías: Space Grotesk (headings) · Inter (body) · IBM Plex Mono (datos/código)
 *
 * Uso de temas:
 *   Modo claro  → [data-theme="light"]  (o sin atributo, con fallback por prefers-color-scheme)
 *   Modo oscuro → [data-theme="dark"]
 */

/* ─────────────────────────────────────────────
   1. Primitivos — valores absolutos de la paleta
   ───────────────────────────────────────────── */
:root {
  /* Degradado de firma */
  --color-brand-green: #09c74e;
  --color-brand-blue: #0985c7;
  --color-brand-gradient: linear-gradient(135deg, #09c74e 0%, #0985c7 100%);

  /* Variantes de marca (extraídas del logo SVG) */
  --color-brand-teal-light: #00d49b; /* ~rgb(0,212,155) */
  --color-brand-teal: #00cca4; /* ~rgb(0,204,164) */
  --color-brand-cyan: #00a6db; /* ~rgb(0,166,219) */

  /* Escala de grises neutros */
  --color-neutral-0: #ffffff;
  --color-neutral-50: #f7f8f9;
  --color-neutral-100: #eef0f2;
  --color-neutral-200: #dde0e5;
  --color-neutral-300: #bcc2cb;
  --color-neutral-400: #8d97a5;
  --color-neutral-500: #5e6b7a;
  --color-neutral-600: #3d4a57;
  --color-neutral-700: #253040;
  --color-neutral-800: #162031;
  --color-neutral-900: #0b1520;
  --color-neutral-950: #060d16;

  /* Colores semánticos (estado) */
  --color-success: #09c74e;
  --color-error: #e03b3b;
  --color-warning: #f5a623;
  --color-info: #0985c7;

  /* ──────────────────────────────────────────
     2. Tipografías
     ────────────────────────────────────────── */
  --font-heading: "Space Grotesk", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", "Menlo", "Consolas", monospace;

  /* Escala tipográfica (fluid / clamp) */
  --text-xs: clamp(0.694rem, 0.66rem + 0.17vw, 0.8rem);
  --text-sm: clamp(0.833rem, 0.8rem + 0.17vw, 0.9rem);
  --text-base: clamp(1rem, 1rem + 0vw, 1rem);
  --text-lg: clamp(1.125rem, 1.07rem + 0.27vw, 1.25rem);
  --text-xl: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --text-2xl: clamp(1.5rem, 1.35rem + 0.75vw, 2rem);
  --text-3xl: clamp(1.875rem, 1.6rem + 1.38vw, 2.5rem);
  --text-4xl: clamp(2.25rem, 1.85rem + 2vw, 3.25rem);
  --text-5xl: clamp(2.75rem, 2.1rem + 3.25vw, 4.5rem);

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

  /* Interlineado */
  --leading-tight: 1.2;
  --leading-snug: 1.35;
  --leading-normal: 1.6;
  --leading-loose: 1.8;

  /* Tracking (letter-spacing) */
  --tracking-tight: -0.03em;
  --tracking-normal: 0em;
  --tracking-wide: 0.04em;
  --tracking-widest: 0.1em;

  /* ──────────────────────────────────────────
     3. Espaciados (escala × 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 */
  --space-32: 8rem; /* 128px */

  /* ──────────────────────────────────────────
     4. Bordes y radios
     ────────────────────────────────────────── */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 20px;
  --radius-full: 9999px;

  --border-thin: 1px;
  --border-medium: 2px;

  /* ──────────────────────────────────────────
     5. Sombras
     ────────────────────────────────────────── */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.14);
  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.18);

  /* Sombra de acento de marca */
  --shadow-brand: 0 4px 24px rgba(9, 133, 199, 0.25);

  /* ──────────────────────────────────────────
     6. Transiciones / animaciones
     ────────────────────────────────────────── */
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-slow: 400ms;
  --duration-slower: 600ms;

  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ──────────────────────────────────────────
     7. Layout
     ────────────────────────────────────────── */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
  --container-2xl: 1440px;

  --nav-height: 64px;

  /* ──────────────────────────────────────────
     8. Z-index
     ────────────────────────────────────────── */
  --z-base: 0;
  --z-raised: 10;
  --z-overlay: 100;
  --z-modal: 200;
  --z-nav: 300;
  --z-toast: 400;
  --z-chat: 500;
}

/* ─────────────────────────────────────────────
   9. Tokens semánticos — MODO CLARO (default)
   ───────────────────────────────────────────── */
:root,
[data-theme="light"] {
  /* Fondos */
  --bg-page: var(--color-neutral-50);
  --bg-surface: var(--color-neutral-0);
  --bg-elevated: var(--color-neutral-0);
  --bg-subtle: var(--color-neutral-100);
  --bg-muted: var(--color-neutral-200);
  --bg-inverse: var(--color-neutral-900);

  /* Texto */
  --text-primary: var(--color-neutral-900);
  --text-secondary: var(--color-neutral-600);
  --text-tertiary: var(--color-neutral-400);
  --text-disabled: var(--color-neutral-300);
  --text-inverse: var(--color-neutral-0);
  --text-brand: var(--color-brand-blue);
  --text-code: var(--color-brand-teal);

  /* Bordes */
  --border-color: var(--color-neutral-200);
  --border-color-strong: var(--color-neutral-300);
  --border-color-focus: var(--color-brand-blue);

  /* Interactivos */
  --interactive-primary: var(--color-brand-green);
  --interactive-primary-hover: #07b044;
  --interactive-secondary: var(--color-brand-blue);
  --interactive-secondary-hover: #0776b0;

  /* Navegación */
  --nav-bg: rgba(247, 248, 249, 0.92);
  --nav-border: var(--color-neutral-200);
  --nav-text: var(--color-neutral-700);
  --nav-text-active: var(--color-brand-blue);

  /* Input */
  --input-bg: var(--color-neutral-0);
  --input-border: var(--color-neutral-300);
  --input-border-focus: var(--color-brand-blue);
  --input-text: var(--color-neutral-900);
  --input-placeholder: var(--color-neutral-400);

  /* Sombras contextuales */
  --shadow-surface: var(--shadow-sm);
  --shadow-elevated: var(--shadow-md);
}

/* ─────────────────────────────────────────────
   10. Tokens semánticos — MODO OSCURO
   ───────────────────────────────────────────── */
[data-theme="dark"] {
  /* Fondos */
  --bg-page: var(--color-neutral-950);
  --bg-surface: var(--color-neutral-900);
  --bg-elevated: var(--color-neutral-800);
  --bg-subtle: var(--color-neutral-800);
  --bg-muted: var(--color-neutral-700);
  --bg-inverse: var(--color-neutral-50);

  /* Texto */
  --text-primary: var(--color-neutral-50);
  --text-secondary: var(--color-neutral-300);
  --text-tertiary: var(--color-neutral-500);
  --text-disabled: var(--color-neutral-600);
  --text-inverse: var(--color-neutral-900);
  --text-brand: #38b6f5; /* azul más brillante para contraste en oscuro */
  --text-code: var(--color-brand-teal-light);

  /* Bordes */
  --border-color: var(--color-neutral-700);
  --border-color-strong: var(--color-neutral-600);
  --border-color-focus: #38b6f5;

  /* Interactivos */
  --interactive-primary: var(--color-brand-green);
  --interactive-primary-hover: #0fd860;
  --interactive-secondary: #38b6f5;
  --interactive-secondary-hover: #61c8ff;

  /* Navegación */
  --nav-bg: rgba(6, 13, 22, 0.92);
  --nav-border: var(--color-neutral-800);
  --nav-text: var(--color-neutral-300);
  --nav-text-active: #38b6f5;

  /* Input */
  --input-bg: var(--color-neutral-800);
  --input-border: var(--color-neutral-600);
  --input-border-focus: #38b6f5;
  --input-text: var(--color-neutral-50);
  --input-placeholder: var(--color-neutral-500);

  /* Sombras contextuales */
  --shadow-surface: 0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-elevated: 0 4px 20px rgba(0, 0, 0, 0.5);
}

/* ─────────────────────────────────────────────
   11. Fallback: sistema operativo como fuente de verdad
       si el usuario no ha establecido preferencia manual
   ───────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* Fondos */
    --bg-page: var(--color-neutral-950);
    --bg-surface: var(--color-neutral-900);
    --bg-elevated: var(--color-neutral-800);
    --bg-subtle: var(--color-neutral-800);
    --bg-muted: var(--color-neutral-700);
    --bg-inverse: var(--color-neutral-50);

    /* Texto */
    --text-primary: var(--color-neutral-50);
    --text-secondary: var(--color-neutral-300);
    --text-tertiary: var(--color-neutral-500);
    --text-disabled: var(--color-neutral-600);
    --text-inverse: var(--color-neutral-900);
    --text-brand: #38b6f5;
    --text-code: var(--color-brand-teal-light);

    /* Bordes */
    --border-color: var(--color-neutral-700);
    --border-color-strong: var(--color-neutral-600);
    --border-color-focus: #38b6f5;

    /* Interactivos */
    --interactive-primary: var(--color-brand-green);
    --interactive-primary-hover: #0fd860;
    --interactive-secondary: #38b6f5;
    --interactive-secondary-hover: #61c8ff;

    /* Navegación */
    --nav-bg: rgba(6, 13, 22, 0.92);
    --nav-border: var(--color-neutral-800);
    --nav-text: var(--color-neutral-300);
    --nav-text-active: #38b6f5;

    /* Input */
    --input-bg: var(--color-neutral-800);
    --input-border: var(--color-neutral-600);
    --input-border-focus: #38b6f5;
    --input-text: var(--color-neutral-50);
    --input-placeholder: var(--color-neutral-500);

    /* Sombras contextuales */
    --shadow-surface: 0 2px 8px rgba(0, 0, 0, 0.4);
    --shadow-elevated: 0 4px 20px rgba(0, 0, 0, 0.5);
  }
}