/* cenit-design-system.css */
/* Sistema de tokens de diseño para Cenit SaaS */
/* Versión 1.0 — 2026-05-16 */

/* System font stacks used to avoid loading external files and comply with strict CSP */

:root {
  /* ── PRIMARIA — Cian Cenit (del logo) ─────────────────────── */
  --cenit-color-primary-50:  #ecfeff;
  --cenit-color-primary-100: #cffafe;
  --cenit-color-primary-200: #a5f3fc;
  --cenit-color-primary-300: #67e8f9;
  --cenit-color-primary-400: #22d3ee;
  --cenit-color-primary-500: #06b6d4;  /* cian Cenit base */
  --cenit-color-primary-600: #0891b2;  /* default brand */
  --cenit-color-primary-700: #0e7490;
  --cenit-color-primary-800: #155e75;
  --cenit-color-primary-900: #164e63;
  --cenit-color-primary-950: #083344;

  /* ── SECUNDARIA — Slate (neutros fríos) ───────────────────── */
  --cenit-color-neutral-50:  #f8fafc;
  --cenit-color-neutral-100: #f1f5f9;
  --cenit-color-neutral-200: #e2e8f0;
  --cenit-color-neutral-300: #cbd5e1;
  --cenit-color-neutral-400: #94a3b8;
  --cenit-color-neutral-500: #64748b;
  --cenit-color-neutral-600: #475569;
  --cenit-color-neutral-700: #334155;
  --cenit-color-neutral-800: #1e293b;
  --cenit-color-neutral-900: #0f172a;
  --cenit-color-neutral-950: #020617;

  /* ── ACENTO CÁLIDO — Sand (de las imágenes zen) ───────────── */
  --cenit-color-sand-50:  #fdfcf8;
  --cenit-color-sand-100: #faf6ec;
  --cenit-color-sand-200: #f3ead0;
  --cenit-color-sand-300: #e8d8aa;
  --cenit-color-sand-400: #d9bf7f;
  --cenit-color-sand-500: #c4a25a;
  --cenit-color-sand-600: #a78346;
  --cenit-color-sand-700: #87683a;
  --cenit-color-sand-800: #6b5232;
  --cenit-color-sand-900: #55422b;
  --cenit-color-sand-950: #322619;

  /* ── ESTADOS SEMÁNTICOS ────────────────────────────────────── */
  --cenit-color-success-50:  #f0fdf4;
  --cenit-color-success-500: #22c55e;
  --cenit-color-success-600: #16a34a;
  --cenit-color-success-700: #15803d;

  --cenit-color-warning-50:  #fffbeb;
  --cenit-color-warning-500: #f59e0b;
  --cenit-color-warning-600: #d97706;
  --cenit-color-warning-700: #b45309;

  --cenit-color-danger-50:   #fef2f2;
  --cenit-color-danger-500:  #ef4444;
  --cenit-color-danger-600:  #dc2626;
  --cenit-color-danger-700:  #b91c1c;

  --cenit-color-info-50:     #eff6ff;
  --cenit-color-info-500:    #3b82f6;
  --cenit-color-info-600:    #2563eb;
  --cenit-color-info-700:    #1d4ed8;

  --cenit-font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --cenit-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* Escala modular (ratio 1.250 — Major Third) */
  --cenit-text-2xs:  0.625rem;  /* 10px */
  --cenit-text-xs:   0.75rem;   /* 12px */
  --cenit-text-sm:   0.875rem;  /* 14px */
  --cenit-text-base: 1rem;      /* 16px */
  --cenit-text-lg:   1.125rem;  /* 18px */
  --cenit-text-xl:   1.25rem;   /* 20px */
  --cenit-text-2xl:  1.5rem;    /* 24px */
  --cenit-text-3xl:  1.875rem;  /* 30px */
  --cenit-text-4xl:  2.25rem;   /* 36px */
  --cenit-text-5xl:  3rem;      /* 48px */
  --cenit-text-6xl:  3.75rem;   /* 60px */

  /* Line heights */
  --cenit-leading-none:    1;
  --cenit-leading-tight:   1.2;
  --cenit-leading-snug:    1.4;
  --cenit-leading-normal:  1.55;
  --cenit-leading-relaxed: 1.75;
  --cenit-leading-loose:   2;

  /* Letter spacing */
  --cenit-tracking-tighter: -0.05em;
  --cenit-tracking-tight:   -0.025em;
  --cenit-tracking-normal:  0;
  --cenit-tracking-wide:    0.025em;
  --cenit-tracking-wider:   0.05em;
  --cenit-tracking-widest:  0.1em;

  /* Pesos */
  --cenit-weight-light:    300;
  --cenit-weight-regular:  400;
  --cenit-weight-medium:   500;
  --cenit-weight-semibold: 600;
  --cenit-weight-bold:     700;
  --cenit-weight-extrabold:800;

  /* ── ESPACIADO (sistema base 4px) ────────────────────────── */
  --cenit-space-0:   0;
  --cenit-space-px:  1px;
  --cenit-space-0_5: 2px;
  --cenit-space-1:   4px;
  --cenit-space-1_5: 6px;
  --cenit-space-2:   8px;
  --cenit-space-2_5: 10px;
  --cenit-space-3:   12px;
  --cenit-space-4:   16px;
  --cenit-space-5:   20px;
  --cenit-space-6:   24px;
  --cenit-space-7:   28px;
  --cenit-space-8:   32px;
  --cenit-space-10:  40px;
  --cenit-space-12:  48px;
  --cenit-space-14:  56px;
  --cenit-space-16:  64px;
  --cenit-space-20:  80px;
  --cenit-space-24:  96px;
  --cenit-space-32:  128px;

  /* ── BORDER RADIUS ─────────────────────────────────────────── */
  --cenit-radius-none: 0;
  --cenit-radius-xs:   2px;
  --cenit-radius-sm:   4px;
  --cenit-radius-md:   6px;
  --cenit-radius-lg:   8px;
  --cenit-radius-xl:   12px;
  --cenit-radius-2xl:  16px;
  --cenit-radius-3xl:  24px;
  --cenit-radius-full: 9999px;

  /* ── SOMBRAS (elevation) ───────────────────────────────────── */
  --cenit-shadow-xs:  0 1px 2px 0 rgba(15, 23, 42, 0.04);
  --cenit-shadow-sm:  0 1px 3px 0 rgba(15, 23, 42, 0.06), 0 1px 2px -1px rgba(15, 23, 42, 0.04);
  --cenit-shadow-md:  0 4px 6px -1px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.04);
  --cenit-shadow-lg:  0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -4px rgba(15, 23, 42, 0.04);
  --cenit-shadow-xl:  0 20px 25px -5px rgba(15, 23, 42, 0.10), 0 8px 10px -6px rgba(15, 23, 42, 0.04);
  --cenit-shadow-focus: 0 0 0 3px rgba(8, 145, 178, 0.18);
  --cenit-shadow-focus-danger: 0 0 0 3px rgba(220, 38, 38, 0.18);

  /* ── MOTION (transitions) ──────────────────────────────────── */
  --cenit-duration-instant: 80ms;
  --cenit-duration-fast:    150ms;
  --cenit-duration-base:    200ms;
  --cenit-duration-slow:    300ms;
  --cenit-duration-slower:  500ms;

  --cenit-easing-linear:    linear;
  --cenit-easing-in:        cubic-bezier(0.4, 0, 1, 1);
  --cenit-easing-out:       cubic-bezier(0, 0, 0.2, 1);
  --cenit-easing-in-out:    cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Z-INDEX ───────────────────────────────────────────────── */
  --cenit-z-base:       0;
  --cenit-z-raised:     10;
  --cenit-z-sticky:     100;
  --cenit-z-dropdown:   1000;
  --cenit-z-overlay:    1100;
  --cenit-z-modal:      1200;
  --cenit-z-popover:    1300;
  --cenit-z-tooltip:    1400;
  --cenit-z-toast:      1500;
  --cenit-z-debug:      9999;

  /* ── BREAKPOINTS (referencia) ────────────────────────────────
     --cenit-bp-sm:   640px;
     --cenit-bp-md:   768px;
     --cenit-bp-lg:   1024px;
     --cenit-bp-xl:   1280px;
     --cenit-bp-2xl:  1536px;
  ───────────────────────────────────────────────────────────── */

  /* ── DEFAULT THEME (zen-light) ROLES SEMÁNTICOS ────────────── */
  --cenit-bg-app:        var(--cenit-color-neutral-50);
  --cenit-bg-surface:    #ffffff;
  --cenit-bg-surface-alt: var(--cenit-color-neutral-100);
  --cenit-bg-elevated:   #ffffff;
  --cenit-bg-overlay:    rgba(15, 23, 42, 0.6);

  --cenit-text-primary:   var(--cenit-color-neutral-900);
  --cenit-text-secondary: var(--cenit-color-neutral-600);
  --cenit-text-tertiary:  var(--cenit-color-neutral-500);
  --cenit-text-disabled:  var(--cenit-color-neutral-400);
  --cenit-text-inverse:   #ffffff;
  --cenit-text-brand:     var(--cenit-color-primary-700);

  --cenit-border-subtle:  var(--cenit-color-neutral-200);
  --cenit-border-default: var(--cenit-color-neutral-300);
  --cenit-border-strong:  var(--cenit-color-neutral-400);
  --cenit-border-focus:   var(--cenit-color-primary-500);

  --cenit-action-primary:        var(--cenit-color-primary-600);
  --cenit-action-primary-hover:  var(--cenit-color-primary-700);
  --cenit-action-primary-active: var(--cenit-color-primary-800);
}

/* ── THEMES ────────────────────────────────────────────────── */

[data-theme="zen-light"] {
  --cenit-bg-page:        #f0f9ff;  /* sky-50 - celeste suave */
  --cenit-bg-card:        #ffffff;
  --cenit-bg-app:         #f0f9ff;
  --cenit-bg-surface:     #ffffff;
  --cenit-bg-surface-alt: #e0f2fe;  /* sky-100 */
  --cenit-bg-elevated:    #ffffff;
  --cenit-bg-overlay:     rgba(15, 23, 42, 0.4);

  --cenit-text-primary:   #0f172a;  /* neutral-900 */
  --cenit-text-secondary: #475569;  /* neutral-600 */
  --cenit-text-tertiary:  #64748b;  /* neutral-500 */
  --cenit-text-disabled:  #94a3b8;  /* neutral-400 */
  --cenit-text-inverse:   #ffffff;
  --cenit-text-brand:     #0891b2;  /* cian Cenit */

  --cenit-border-subtle:  #bae6fd;  /* sky-200 - acento celeste sutil */
  --cenit-border-default: #e0f2fe;  /* sky-100 - border claro */
  --cenit-border-strong:  #7dd3fc;  /* sky-300 */
  --cenit-border-focus:   #0891b2;

  --cenit-action-primary:        #0891b2;  /* primary-600 cian Cenit */
  --cenit-action-primary-hover:  #0e7490;
  --cenit-action-primary-active: #155e75;
}

[data-theme="zen-graphite"] {
  --cenit-bg-page:        #0c0f12;  /* graphite black background */
  --cenit-bg-card:        #15191f;  /* deep charcoal card */
  --cenit-bg-app:         #0c0f12;
  --cenit-bg-surface:     #15191f;
  --cenit-bg-surface-alt: #1b222a;  /* metallic dark blue/slate */
  --cenit-bg-elevated:    #1f2730;
  --cenit-bg-overlay:     rgba(10, 12, 16, 0.85);

  --cenit-text-primary:   #f8fafc;  /* crisp white */
  --cenit-text-secondary: #94a3b8;  /* steel blue-gray */
  --cenit-text-tertiary:  #64748b;  /* muted slate */
  --cenit-text-disabled:  #475569;
  --cenit-text-inverse:   #0c0f12;
  --cenit-text-brand:     #06b6d4;  /* bright cian Cenit */

  --cenit-border-subtle:  #1e293b;  /* deep slate border */
  --cenit-border-default: #252e3b;  /* metallic steel border */
  --cenit-border-strong:  #374357;  /* brushed metal border */
  --cenit-border-focus:   #06b6d4;

  --cenit-action-primary:        #0891b2;  /* default brand cian */
  --cenit-action-primary-hover:  #0ea5e9;  /* metallic bright cian/blue */
  --cenit-action-primary-active: #0284c7;
}

[data-theme="zen-sand"] {
  --cenit-bg-app:        #090d16;  /* Obsidian Slate deep dark */
  --cenit-bg-surface:    #111827;  /* Slate-900 */
  --cenit-bg-surface-alt: #1f2937;  /* Slate-800 */
  --cenit-bg-elevated:   #1f2937;
  --cenit-bg-overlay:    rgba(3, 7, 18, 0.85);

  --cenit-text-primary:   #f9fafb;  /* Slate-50 */
  --cenit-text-secondary: #cbd5e1;  /* Slate-300 */
  --cenit-text-tertiary:  #94a3b8;  /* Slate-400 */
  --cenit-text-disabled:  #4b5563;  /* Slate-600 */
  --cenit-text-inverse:   #090d16;
  --cenit-text-brand:     #10b981;  /* Emerald-500 */

  --cenit-border-subtle:  #1e293b;  /* Slate-800 border */
  --cenit-border-default: #374151;  /* Slate-700 border */
  --cenit-border-strong:  #4b5563;
  --cenit-border-focus:   #10b981;  /* Emerald-500 focus */

  --cenit-action-primary:        #10b981;  /* Emerald-600 primary button */
  --cenit-action-primary-hover:  #059669;  /* Emerald-700 */
  --cenit-action-primary-active: #047857;  /* Emerald-800 */
}

[data-theme="zen-deep"] {
  --cenit-bg-app:        var(--cenit-color-primary-950);
  --cenit-bg-surface:    var(--cenit-color-neutral-800);
  --cenit-bg-surface-alt: var(--cenit-color-neutral-900);
  --cenit-bg-elevated:   var(--cenit-color-neutral-800);
  --cenit-bg-overlay:    rgba(2, 6, 23, 0.8);

  --cenit-text-primary:   var(--cenit-color-neutral-100);
  --cenit-text-secondary: var(--cenit-color-neutral-300);
  --cenit-text-tertiary:  var(--cenit-color-neutral-400);
  --cenit-text-disabled:  var(--cenit-color-neutral-600);
  --cenit-text-inverse:   var(--cenit-color-primary-950);
  --cenit-text-brand:     var(--cenit-color-primary-300);

  --cenit-border-subtle:  var(--cenit-color-neutral-700);
  --cenit-border-default: var(--cenit-color-neutral-600);
  --cenit-border-strong:  var(--cenit-color-neutral-500);
  --cenit-border-focus:   var(--cenit-color-primary-400);

  --cenit-action-primary:        var(--cenit-color-primary-300);
  --cenit-action-primary-hover:  var(--cenit-color-primary-200);
  --cenit-action-primary-active: var(--cenit-color-primary-100);
}

/* ── RESET Y BASE ──────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--cenit-font-sans);
  background-color: var(--cenit-bg-app);
  color: var(--cenit-text-primary);
  line-height: var(--cenit-leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}