/* ==========================================================================
   Chandify Design System — Colors, Type, Spacing, Motion
   ==========================================================================
   Canonical source for every token. Import this BEFORE any UI Kit stylesheet.

   Font: Plus Jakarta Sans (Google Fonts) — nearest match to the wordmark.
   Weights used: 300 (Light), 400 (Regular), 500 (Medium). NEVER 600+.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500&display=swap');

:root {
  /* ---------- Primary — Azul Chandify ---------- */
  --c-primary-50:  #E9F0FF;
  --c-primary-200: #B8CCFF;
  --c-primary-400: #6B94F6;
  --c-primary-500: #2B66F6;     /* main */
  --c-primary-600: #1D4ED8;
  --c-primary-900: #1D2C49;

  /* ---------- Secondary — Soporte (deep navy) ---------- */
  --c-secondary-50:  #E5E9F2;
  --c-secondary-300: #AAB4C8;
  --c-secondary-500: #202C47;   /* main */
  --c-secondary-700: #111827;

  /* ---------- Accent — Cyan ---------- */
  --c-accent-50:  #E6FAFD;
  --c-accent-200: #B5EEF6;
  --c-accent-300: #6BD4E5;
  --c-accent-400: #2DD7E8;      /* main */
  --c-accent-500: #1FB5C4;

  /* ---------- Neutrales ---------- */
  --c-fg:           #101011;   /* Foreground / ink */
  --c-fg-2:         #37373A;   /* Secondary FG */
  --c-fg-3:         #6B7280;   /* Tertiary FG */
  --c-placeholder:  #9C9CA0;
  --c-border:       #E5E7EB;
  --c-bg:           #F4F6FA;   /* App background */
  --c-surface:      #FFFFFF;   /* Cards */
  --c-surface-2:    #F9FAFC;   /* Hover card bg, zebra rows */

  /* ---------- Estados ---------- */
  --c-success:      #17CE59;
  --c-success-bg:   #EAFBF1;
  --c-success-fg:   #065F46;
  --c-warning:      #FDBA03;
  --c-warning-bg:   #FFF7E6;
  --c-warning-fg:   #B45309;
  --c-error:        #D11939;
  --c-error-bg:     #FEECEC;
  --c-error-fg:     #7F1D1D;

  /* ---------- Semantic aliases ---------- */
  --c-action:        var(--c-primary-500);
  --c-action-hover:  var(--c-primary-600);
  --c-ink-deep:      var(--c-primary-900);
  --c-link:          var(--c-primary-500);
  --c-focus-ring:    var(--c-primary-500);
  --c-focus-ring-on-glass: var(--c-accent-400);

  /* ---------- Data‑viz (for charts) ---------- */
  --c-viz-1: #2B66F6;   /* Azul main   */
  --c-viz-2: #2DD7E8;   /* Cyan accent */
  --c-viz-3: #17CE59;   /* Success green */
  --c-viz-4: #FDBA03;   /* Warning yellow */
  --c-viz-5: #6B94F6;   /* Azul 400 */
  --c-viz-6: #AAB4C8;   /* Neutral */

  /* ---------- Type ---------- */
  --ff-sans: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system,
             'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --ff-mono: ui-monospace, 'SFMono-Regular', Menlo, 'Roboto Mono', monospace;

  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;   /* max — never 600+ */

  /* Fluid-ish sizes (fixed px — predictability first) */
  --fs-display-xl: 72px;  --lh-display-xl: 80px;
  --fs-display-l:  56px;  --lh-display-l:  64px;
  --fs-h1:         40px;  --lh-h1:         48px;
  --fs-h2:         32px;  --lh-h2:         40px;
  --fs-h3:         24px;  --lh-h3:         32px;
  --fs-h4:         20px;  --lh-h4:         28px;
  --fs-body-lg:    18px;  --lh-body-lg:    28px;
  --fs-body:       15px;  --lh-body:       24px;
  --fs-body-sm:    13px;  --lh-body-sm:    20px;
  --fs-caption:    12px;  --lh-caption:    16px;
  --fs-eyebrow:    11px;  --lh-eyebrow:    14px;

  --tracking-eyebrow: 0.08em;
  --tracking-tight:   -0.02em;
  --tracking-body:    0;

  /* ---------- Spacing (4pt) ---------- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;

  /* ---------- Radii ---------- */
  --r-xs:  6px;
  --r-sm:  10px;
  --r-md:  14px;
  --r-lg:  20px;
  --r-xl:  28px;
  --r-2xl: 36px;
  --r-pill: 9999px;

  /* ---------- Shadows ---------- */
  --shadow-1: 0 1px 2px rgba(16, 24, 40, .04);
  --shadow-2: 0 6px 16px rgba(29, 44, 73, .08);
  --shadow-3: 0 20px 40px -12px rgba(29, 44, 73, .16);
  --shadow-glass: inset 0 1px 0 rgba(255,255,255,.6), 0 8px 24px rgba(29, 44, 73, .08);

  /* ---------- Motion ---------- */
  --d-fast:  120ms;
  --d-base:  200ms;
  --d-slow:  360ms;
  --ease-out:    cubic-bezier(.2, .8, .2, 1);
  --ease-inout:  cubic-bezier(.4, 0, .2, 1);

  /* ---------- Glass ---------- */
  --glass-bg:     rgba(255, 255, 255, 0.55);
  --glass-border: rgba(255, 255, 255, 0.65);
  --glass-blur:   blur(24px) saturate(140%);
  --glass-dark-bg: rgba(16, 16, 17, 0.72);
}

/* ==========================================================================
   Dark theme — opt-in via `data-theme="dark"` on <html> or any ancestor
   ========================================================================== */
[data-theme="dark"] {
  --c-fg:           #F5F7FB;
  --c-fg-2:         #C5CAD4;
  --c-fg-3:         #8A93A3;
  --c-placeholder:  #6B7280;
  --c-border:       #24262B;
  --c-bg:           #0C0D10;
  --c-surface:      #17181C;
  --c-surface-2:    #1E2024;

  --c-primary-50:  #19243F;
  --c-primary-200: #2A3F6E;
  --c-primary-600: #5B82F9;

  --c-secondary-50: #20232A;
  --c-secondary-300: #3A4050;

  --c-success-bg: #0F2A1B;
  --c-success-fg: #7EE6A8;
  --c-warning-bg: #2A2008;
  --c-warning-fg: #FFD77A;
  --c-error-bg:   #2B1114;
  --c-error-fg:   #F88F9E;

  --glass-bg:     rgba(23, 24, 28, 0.55);
  --glass-border: rgba(255, 255, 255, 0.08);

  --shadow-1: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-2: 0 6px 16px rgba(0, 0, 0, .35);
  --shadow-3: 0 20px 40px -12px rgba(0, 0, 0, .55);
  --shadow-glass: inset 0 1px 0 rgba(255,255,255,.05), 0 8px 24px rgba(0, 0, 0, .4);
}

[data-theme="dark"] .icon-btn:hover { background: #20232A; border-color: #2E323B; }
[data-theme="dark"] .pill-btn--ghost { background: var(--c-surface); color: var(--c-fg); }
[data-theme="dark"] .pill-btn--ghost:hover { background: var(--c-surface-2); }
[data-theme="dark"] .chip { background: #232830; color: var(--c-fg-2); }
[data-theme="dark"] .hatch {
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(255,255,255,.06) 0,
    rgba(255,255,255,.06) 1px,
    transparent 1px,
    transparent 6px
  );
}

/* ==========================================================================
   Base element styles — semantic type mapped to the scale above
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--c-bg);
  color: var(--c-fg);
  font-family: var(--ff-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6, p {
  margin: 0;
  text-wrap: pretty;
}

h1 {
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  font-weight: var(--fw-light);
  letter-spacing: var(--tracking-tight);
  color: var(--c-fg);
}

h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  font-weight: var(--fw-regular);
  letter-spacing: var(--tracking-tight);
  color: var(--c-fg);
}

h3 {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: var(--fw-medium);
  color: var(--c-fg);
}

h4 {
  font-size: var(--fs-h4);
  line-height: var(--lh-h4);
  font-weight: var(--fw-medium);
  color: var(--c-fg);
}

p {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-fg-2);
}

small, .text-sm {
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  color: var(--c-fg-3);
}

.eyebrow {
  font-size: var(--fs-eyebrow);
  line-height: var(--lh-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  font-weight: var(--fw-medium);
  color: var(--c-fg-3);
}

.caption {
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: var(--c-fg-3);
}

.display-xl { font-size: var(--fs-display-xl); line-height: var(--lh-display-xl); font-weight: var(--fw-light); letter-spacing: var(--tracking-tight); }
.display-l  { font-size: var(--fs-display-l);  line-height: var(--lh-display-l);  font-weight: var(--fw-light); letter-spacing: var(--tracking-tight); }

.num, .tabular { font-variant-numeric: tabular-nums; }

a {
  color: var(--c-link);
  text-decoration: none;
  transition: color var(--d-fast) var(--ease-out);
}
a:hover { color: var(--c-action-hover); }

:focus-visible {
  outline: 2px solid var(--c-focus-ring);
  outline-offset: 2px;
  border-radius: inherit;
}

/* ==========================================================================
   Utility classes shared across kits
   ========================================================================== */

.card {
  background: var(--c-surface);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-2);
  padding: var(--sp-6);
}

.card-compact {
  background: var(--c-surface);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-2);
  padding: var(--sp-5);
}

.glass {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-glass);
  border-radius: var(--r-xl);
}

.glass-dark {
  background: var(--glass-dark-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #fff;
  border-radius: var(--r-xl);
}

.pill-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 10px 18px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--c-fg);
  color: #fff;
  font-family: inherit;
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  cursor: pointer;
  transition: background var(--d-base) var(--ease-out),
              transform var(--d-fast) var(--ease-out);
}
.pill-btn:hover { background: var(--c-primary-900); }
.pill-btn:active { transform: scale(0.98); }

.pill-btn--primary { background: var(--c-primary-500); }
.pill-btn--primary:hover { background: var(--c-primary-600); color: #fff; }

.pill-btn--ghost {
  background: var(--c-surface);
  color: var(--c-fg);
  box-shadow: var(--shadow-1);
}
.pill-btn--ghost:hover { background: var(--c-surface-2); }

.icon-btn {
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 9999px;
  background: var(--c-surface);
  box-shadow: var(--shadow-1);
  color: var(--c-fg-2);
  border: 1px solid var(--c-border);
  cursor: pointer;
  transition: background var(--d-base) var(--ease-out),
              border-color var(--d-base) var(--ease-out);
}
.icon-btn:hover { background: #EEF2F7; border-color: #D9DEE6; }
.icon-btn:active { background: #E5E9F2; }

.chip {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: var(--c-secondary-50);
  color: var(--c-fg-2);
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
}
.chip--primary { background: var(--c-primary-50); color: var(--c-primary-600); }
.chip--success { background: var(--c-success-bg); color: var(--c-success-fg); }
.chip--warning { background: var(--c-warning-bg); color: var(--c-warning-fg); }
.chip--error   { background: var(--c-error-bg);   color: var(--c-error-fg);   }
.chip--accent  { background: var(--c-accent-50);  color: var(--c-accent-500); }

.input {
  width: 100%;
  padding: 12px 16px;
  border-radius: var(--r-md);
  border: 1px solid var(--c-border);
  background: var(--c-surface);
  font-family: inherit;
  font-size: var(--fs-body);
  color: var(--c-fg);
  transition: border-color var(--d-base) var(--ease-out),
              box-shadow var(--d-base) var(--ease-out);
}
.input::placeholder { color: var(--c-placeholder); }
.input:focus {
  outline: none;
  border-color: var(--c-primary-500);
  box-shadow: 0 0 0 4px rgba(43, 102, 246, 0.12);
}

/* Hero radial wash — used on marketing + some dashboard heroes */
.hero-wash {
  background:
    radial-gradient(120% 80% at 85% 100%, rgba(45, 215, 232, 0.18) 0%, transparent 55%),
    radial-gradient(100% 70% at 10% 0%,   rgba(43, 102, 246, 0.14) 0%, transparent 60%),
    var(--c-bg);
}

/* Faint diagonal hatch used inside chart empty bands */
.hatch {
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(16, 24, 40, .06) 0,
    rgba(16, 24, 40, .06) 1px,
    transparent 1px,
    transparent 6px
  );
}