/* =============================================================
   DYMSY DESIGN SYSTEM · TOKENS v1.0
   De automatización a sistemas industriales autónomos.
   Importa este archivo antes que cualquier otro estilo:
     <link rel="stylesheet" href="/tokens/tokens.css">
   ============================================================= */

:root {
  /* ---- Core ---- */
  --dym-ink:          #0F172A;
  --dym-paper:        #FFFFFF;
  --dym-signal:       #2563EB;
  --dym-signal-deep:  #1D4ED8;
  --dym-accent:       #F97316;
  --dym-accent-deep:  #EA580C;

  /* ---- Slate scale ---- */
  --dym-slate-50:  #F8FAFC;
  --dym-slate-100: #F1F5F9;
  --dym-slate-200: #E2E8F0;
  --dym-slate-300: #CBD5E1;
  --dym-slate-400: #94A3B8;
  --dym-slate-500: #64748B;
  --dym-slate-600: #475569;
  --dym-slate-700: #334155;
  --dym-slate-800: #1E293B;
  --dym-slate-900: #0F172A;
  --dym-slate-950: #020617;

  /* ---- Signal palette (asignada a dominios técnicos) ---- */
  --dym-c-control:   #3B82F6;
  --dym-c-data:      #60A5FA;
  --dym-c-intel:     #F97316;
  --dym-c-vision:    #818CF8;
  --dym-c-network:   #22C55E;
  --dym-c-metrology: #0891B2;
  --dym-c-twin:      #14B8A6;
  --dym-c-danger:    #EF4444;

  /* ---- Semánticos ---- */
  --dym-surface:        var(--dym-paper);
  --dym-surface-muted:  var(--dym-slate-50);
  --dym-surface-ink:    var(--dym-ink);
  --dym-text:           var(--dym-ink);
  --dym-text-muted:     var(--dym-slate-600);
  --dym-text-subtle:    var(--dym-slate-400);
  --dym-text-on-ink:    var(--dym-paper);
  --dym-text-on-signal: var(--dym-paper);
  --dym-border:         var(--dym-slate-200);
  --dym-border-soft:    var(--dym-slate-100);
  --dym-border-strong:  var(--dym-slate-300);
  --dym-focus:          var(--dym-accent);
  --dym-success:        var(--dym-c-network);
  --dym-warning:        var(--dym-accent);
  --dym-danger:         var(--dym-c-danger);
  --dym-info:           var(--dym-signal);

  /* ---- Typography ---- */
  --dym-font-sans: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --dym-font-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, SFMono-Regular, Menlo, monospace;

  --dym-fs-xs:   12px;
  --dym-fs-sm:   13px;
  --dym-fs-base: 15px;
  --dym-fs-md:   16px;
  --dym-fs-lg:   18px;
  --dym-fs-xl:   22px;
  --dym-fs-2xl:  28px;
  --dym-fs-3xl:  36px;
  --dym-fs-4xl:  48px;
  --dym-fs-5xl:  64px;
  --dym-fs-6xl:  80px;

  --dym-lh-tight:   1.15;
  --dym-lh-snug:    1.3;
  --dym-lh-normal:  1.5;
  --dym-lh-relaxed: 1.65;

  --dym-ls-tighter: -0.02em;
  --dym-ls-tight:   -0.01em;
  --dym-ls-wide:    0.05em;
  --dym-ls-wider:   0.1em;
  --dym-ls-widest:  0.2em;

  /* ---- Space (4-pt scale) ---- */
  --dym-space-1:  4px;
  --dym-space-2:  8px;
  --dym-space-3:  12px;
  --dym-space-4:  16px;
  --dym-space-5:  20px;
  --dym-space-6:  24px;
  --dym-space-7:  32px;
  --dym-space-8:  40px;
  --dym-space-9:  48px;
  --dym-space-10: 64px;
  --dym-space-11: 80px;
  --dym-space-12: 96px;
  --dym-space-13: 128px;

  /* ---- Radius ---- */
  --dym-radius-xs:   2px;
  --dym-radius-sm:   4px;
  --dym-radius-md:   6px;
  --dym-radius-lg:   8px;
  --dym-radius-xl:   12px;
  --dym-radius-2xl:  16px;
  --dym-radius-pill: 9999px;

  /* ---- Shadow ---- */
  --dym-shadow-xs:     0 1px 2px rgba(15,23,42,0.04);
  --dym-shadow-sm:     0 2px 4px rgba(15,23,42,0.06);
  --dym-shadow-md:     0 4px 16px rgba(15,23,42,0.06);
  --dym-shadow-lg:     0 12px 32px rgba(15,23,42,0.08);
  --dym-shadow-xl:     0 24px 48px rgba(15,23,42,0.12);
  --dym-shadow-signal: 0 4px 24px rgba(37,99,235,0.20);
  --dym-shadow-accent: 0 4px 24px rgba(249,115,22,0.22);

  /* ---- Border widths ---- */
  --dym-bw-hairline: 1px;
  --dym-bw-regular:  1.5px;
  --dym-bw-accent:   3px;
  --dym-bw-heavy:    4px;

  /* ---- Motion ---- */
  --dym-dur-fast:   150ms;
  --dym-dur-base:   220ms;
  --dym-dur-slow:   350ms;
  --dym-dur-cinema: 550ms;
  --dym-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --dym-ease-entrance: cubic-bezier(0, 0, 0.2, 1);
  --dym-ease-exit:     cubic-bezier(0.4, 0, 1, 1);

  /* ---- Layout ---- */
  --dym-container-sm: 640px;
  --dym-container-md: 768px;
  --dym-container-lg: 1040px;
  --dym-container-xl: 1200px;
  --dym-container-2xl: 1360px;
}

/* Dark mode — invierte superficies, mantiene la señal DYMSY */
:root[data-theme="dark"],
:root:not([data-theme="light"]) {
  /* activo por preferencia del sistema */
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --dym-surface:        #0B1220;
    --dym-surface-muted:  #111827;
    --dym-surface-ink:    #06090F;
    --dym-text:           #F8FAFC;
    --dym-text-muted:     #CBD5E1;
    --dym-text-subtle:    #64748B;
    --dym-border:         rgba(203,213,225,0.14);
    --dym-border-soft:    rgba(203,213,225,0.08);
    --dym-border-strong:  rgba(203,213,225,0.24);
    --dym-shadow-md:      0 4px 16px rgba(0,0,0,0.35);
    --dym-shadow-lg:      0 12px 32px rgba(0,0,0,0.45);
  }
}

:root[data-theme="dark"] {
  --dym-surface:        #0B1220;
  --dym-surface-muted:  #111827;
  --dym-surface-ink:    #06090F;
  --dym-text:           #F8FAFC;
  --dym-text-muted:     #CBD5E1;
  --dym-text-subtle:    #64748B;
  --dym-border:         rgba(203,213,225,0.14);
  --dym-border-soft:    rgba(203,213,225,0.08);
  --dym-border-strong:  rgba(203,213,225,0.24);
  --dym-shadow-md:      0 4px 16px rgba(0,0,0,0.35);
  --dym-shadow-lg:      0 12px 32px rgba(0,0,0,0.45);
}