/* ============================================================
   DASHBOARD REDESIGN — Design Tokens
   Telco-corporate · Editorial dark · Layered navy
   No brand identity copied. Original aesthetic.
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700&family=Instrument+Serif:ital@0;1&family=Manrope:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap");

:root {
  /* ── Surfaces (layered navy depth) ────────────────────────── */
  --bg:           #0a1020;
  --bg-grad:      radial-gradient(ellipse 80% 60% at 20% 0%, #131c36 0%, #0a1020 50%, #070b18 100%);
  --surface-1:    #121a2e;
  --surface-2:    #18223a;
  --surface-3:    #212c48;
  --surface-4:    #2a3658;

  --hairline:     rgba(148, 163, 200, 0.10);
  --hairline-2:   rgba(148, 163, 200, 0.18);
  --border:       #232e4a;
  --border-soft:  #1c2540;

  /* ── Foreground ───────────────────────────────────────────── */
  --fg:           #eef1f8;
  --fg-2:         #aab3cf;
  --fg-3:         #6b7595;
  --fg-4:         #4a5475;

  /* ── Brand / Accents (oklch curated) ──────────────────────── */
  /* Cobalt — primary action, focus rings, brand */
  --accent:       oklch(0.66 0.18 252);   /* ~#4a86f0 */
  --accent-hi:    oklch(0.74 0.16 252);   /* lighter */
  --accent-lo:    oklch(0.50 0.20 252);   /* deeper */
  --accent-bg:    color-mix(in oklch, oklch(0.66 0.18 252) 14%, transparent);
  --accent-line:  color-mix(in oklch, oklch(0.66 0.18 252) 35%, transparent);

  /* Cyan — secondary, links, chart */
  --cyan:         oklch(0.80 0.13 220);   /* ~#7dd3fc */
  --cyan-bg:      color-mix(in oklch, oklch(0.80 0.13 220) 12%, transparent);

  /* Editorial highlight — used sparingly in serif eyebrow text */
  --eyebrow:      oklch(0.85 0.10 80);    /* warm cream */

  /* ── Status (curated, all same chroma family) ─────────────── */
  --ok:           oklch(0.72 0.16 155);   /* mint */
  --ok-bg:        color-mix(in oklch, oklch(0.72 0.16 155) 13%, transparent);
  --warn:         oklch(0.80 0.15 75);    /* amber */
  --warn-bg:      color-mix(in oklch, oklch(0.80 0.15 75) 13%, transparent);
  --danger:       oklch(0.68 0.20 25);    /* coral red */
  --danger-bg:    color-mix(in oklch, oklch(0.68 0.20 25) 13%, transparent);
  --purple:       oklch(0.70 0.16 305);   /* violet */
  --purple-bg:    color-mix(in oklch, oklch(0.70 0.16 305) 13%, transparent);

  /* ── Type ─────────────────────────────────────────────────── */
  --font-display: "Instrument Serif", "Times New Roman", serif;
  --font-ui:      "Manrope", system-ui, -apple-system, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, Menlo, monospace;

  /* ── Radii ────────────────────────────────────────────────── */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-pill: 999px;

  /* ── Shadows ──────────────────────────────────────────────── */
  --shadow-card:    0 1px 0 0 rgba(255,255,255,0.03) inset, 0 1px 2px rgba(0,0,0,0.3);
  --shadow-lifted:  0 1px 0 0 rgba(255,255,255,0.04) inset, 0 12px 32px -12px rgba(0,0,0,0.5), 0 4px 12px -6px rgba(0,0,0,0.35);
  --shadow-glow:    0 0 0 4px var(--accent-bg);

  /* ── Motion ───────────────────────────────────────────────── */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Base reset — scoped under .telco */
.telco, .telco * { box-sizing: border-box; }
.telco {
  font-family: var(--font-ui);
  color: var(--fg);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ────────────────────────────────────────────────────────────
   LIGHT MODE — warm off-white, deeper accents for AA contrast
   Aplicado vía [data-theme="light"] en el contenedor .telco
   ──────────────────────────────────────────────────────────── */
.telco[data-theme="light"] {
  /* Surfaces — warm off-white layered */
  --bg:           #f5f3ec;
  --bg-grad:      radial-gradient(ellipse 80% 60% at 20% 0%, #ffffff 0%, #f5f3ec 50%, #ede8dc 100%);
  --surface-1:    #ffffff;
  --surface-2:    #f0ece3;
  --surface-3:    #e6e1d4;
  --surface-4:    #dad3c2;

  --hairline:     rgba(28, 32, 50, 0.07);
  --hairline-2:   rgba(28, 32, 50, 0.12);
  --border:       rgba(28, 32, 50, 0.16);
  --border-soft:  rgba(28, 32, 50, 0.09);

  /* Foreground — deep ink */
  --fg:           #0f1729;
  --fg-2:         #4a536f;
  --fg-3:         #6b7593;
  --fg-4:         #98a0b9;

  /* Accents — darker for AA contrast on light */
  --accent:       oklch(0.52 0.21 252);
  --accent-hi:    oklch(0.60 0.20 252);
  --accent-lo:    oklch(0.42 0.22 252);
  --accent-bg:    color-mix(in oklch, oklch(0.52 0.21 252) 11%, transparent);
  --accent-line:  color-mix(in oklch, oklch(0.52 0.21 252) 30%, transparent);

  --cyan:         oklch(0.55 0.16 220);
  --cyan-bg:      color-mix(in oklch, oklch(0.55 0.16 220) 10%, transparent);

  --eyebrow:      oklch(0.50 0.13 60);

  --ok:           oklch(0.55 0.16 155);
  --ok-bg:        color-mix(in oklch, oklch(0.55 0.16 155) 12%, transparent);
  --warn:         oklch(0.60 0.16 75);
  --warn-bg:      color-mix(in oklch, oklch(0.60 0.16 75) 14%, transparent);
  --danger:       oklch(0.55 0.22 25);
  --danger-bg:    color-mix(in oklch, oklch(0.55 0.22 25) 10%, transparent);
  --purple:       oklch(0.55 0.18 305);
  --purple-bg:    color-mix(in oklch, oklch(0.55 0.18 305) 10%, transparent);

  --shadow-card:    0 1px 0 0 rgba(255,255,255,0.6) inset, 0 1px 2px rgba(15,23,41,0.06);
  --shadow-lifted:  0 1px 0 0 rgba(255,255,255,0.8) inset, 0 12px 32px -12px rgba(15,23,41,0.18), 0 4px 12px -6px rgba(15,23,41,0.10);
  --shadow-glow:    0 0 0 4px var(--accent-bg);
}
.telco button { font-family: inherit; }
.telco input, .telco select { font-family: inherit; }

/* Editorial display */
.telco .serif { font-family: var(--font-display); font-style: italic; font-weight: 400; }
.telco .mono  { font-family: var(--font-mono); }

/* Decorative grain — adds atmosphere on dark surfaces */
.telco .grain {
  position: relative;
}
.telco .grain::after {
  content: "";
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  pointer-events: none;
  mix-blend-mode: overlay;
  opacity: 0.5;
}