@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* ===== DESIGN TOKENS — Asegurate CR ===================================
   Extracted from the Canva design export (Asegurate-CR-Comparador-DayNight.html).
   This file owns ALL color + typography + spacing tokens and the dual-theme
   switching.  Nothing in index.html should hard-code a colour that is listed
   here.
   ====================================================================== */

/* ── Color tokens (base / fallback — overridden by theme blocks below) ── */
:root {
  /* Neutral scale (slate) */
  --slate-950: #0a111e;
  --slate-900: #0f172a;
  --slate-850: #162032;
  --slate-800: #1e293b;
  --slate-750: #1a2d47;
  --slate-700: #334155;
  --slate-600: #475569;
  --slate-500: #64748b;
  --slate-400: #94a3b8;
  --slate-200: #e2e8f0;
  --white:     #ffffff;

  /* Brand blue (primary) */
  --blue-700: #1d4ed8;
  --blue-600: #2563eb;
  --blue-500: #3b82f6;
  --blue-400: #60a5fa;
  --blue-300: #93c5fd;
  --blue-tint: rgba(59,130,246,0.12);

  /* Semantic */
  --success:        #22c55e;
  --success-alt:    #10b981;
  --success-bright: #34d399;
  --warning:        #f59e0b;
  --danger:         #ef4444;
  --danger-deep:    #dc2626;
  --purple:         #a78bfa;

  /* Insurer brand accents */
  --ins-ins:      #ef4444;  --ins-ins-fill:      rgba(239,68,68,0.18);
  --ins-assa:     #0ea5e9;  --ins-assa-fill:     rgba(14,165,233,0.18);
  --ins-qualitas: #ea580c;  --ins-qualitas-fill: rgba(234,88,12,0.18);
  --ins-mnk:      #14b8a6;  --ins-mnk-fill:      rgba(20,184,166,0.18);
  --ins-lafise:   #22c55e;  --ins-lafise-fill:   rgba(34,197,94,0.18);

  /* Semantic surface aliases */
  --bg-app:         var(--slate-900);
  --surface-card:   var(--slate-800);
  --surface-sunken: var(--slate-850);
  --surface-hover:  var(--slate-750);
  --border:         var(--slate-700);
  --border-strong:  var(--slate-600);

  /* Semantic text aliases */
  --text-heading:  var(--white);
  --text-body:     var(--slate-200);
  --text-muted:    var(--slate-500);
  --text-faint:    var(--slate-600);
  --text-note:     var(--slate-400);
  --text-action:   var(--blue-500);

  /* Overlays */
  --overlay-modal: rgba(0,0,0,0.65);
  --overlay-ins:   rgba(15,23,42,0.72);
}

/* ── Typography tokens ──────────────────────────────────────────────── */
:root {
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'Inter', ui-monospace, 'SF Mono', Menlo, monospace;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-extra:    800;

  --fs-display: 2.25rem;
  --fs-h1:      1.45rem;
  --fs-h2:      1.25rem;
  --fs-lg:      0.97rem;
  --fs-base:    0.88rem;
  --fs-sm:      0.82rem;
  --fs-xs:      0.7rem;
  --fs-2xs:     0.63rem;

  --lh-tight:  1.18;
  --lh-snug:   1.3;
  --lh-normal: 1.5;

  --ls-display: -0.5px;
  --ls-tight:   -0.2px;
  --ls-label:   0.06em;
}

/* ── Spacing / radius / shadow / motion tokens ──────────────────────── */
:root {
  --sp-1: 4px;  --sp-2: 6px;   --sp-3: 8px;   --sp-4: 10px;
  --sp-5: 12px; --sp-6: 14px;  --sp-7: 16px;  --sp-8: 20px;
  --sp-9: 24px; --sp-10: 28px; --sp-11: 32px; --sp-12: 44px;
  --sp-13: 60px;

  --r-xs: 3px;  --r-sm: 5px;   --r-md: 7px;  --r-lg: 8px;
  --r-xl: 12px; --r-2xl: 16px; --r-pill: 99px;

  --bw: 1px; --bw-emph: 1.5px; --bw-prima: 2px;

  --shadow-card: 0 1px 3px rgba(0,0,0,0.30);
  --shadow-pop:  0 12px 32px rgba(0,0,0,0.45);
  --shadow-form: 0 18px 50px rgba(0,0,0,0.35);
  --ring-focus:  0 0 0 3px rgba(59,130,246,0.25);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 0.1s;
  --dur-base: 0.15s;
  --dur-slow: 0.6s;

  --nav-h:     60px;
  --container: 1180px;
  --grid-gap:  14px;
}

/* ════════════════════════════════════════════════════════════════════════
   DUAL THEME
   Night: AMOLED Violet  |  Day: Light Grey Professional
   ════════════════════════════════════════════════════════════════════════ */

/* ── NIGHT — AMOLED Violet (default) ────────────────────────────────── */
:root,
[data-theme="dark"] {
  /* Neutral ramp — zinc */
  --slate-950: #050507;
  --slate-900: #09090b;
  --slate-850: #111115;
  --slate-800: #18181b;
  --slate-750: #1e1e23;
  --slate-700: #27272a;
  --slate-600: #3f3f46;
  --slate-500: #71717a;
  --slate-400: #a1a1aa;
  --slate-200: #e4e4e7;
  --white:     #ffffff;

  /* Action — violet */
  --blue-700:  #6d28d9;
  --blue-600:  #7c3aed;
  --blue-500:  #8b5cf6;
  --blue-400:  #a78bfa;
  --blue-300:  #c4b5fd;
  --blue-tint: rgba(139,92,246,0.12);

  /* Semantic accents */
  --success:        #22c55e;
  --success-alt:    #10b981;
  --success-bright: #34d399;
  --warning:        #f59e0b;
  --danger:         #ef4444;
  --danger-deep:    #dc2626;
  --purple:         #a78bfa;

  /* Non-chained surfaces */
  --nav-bg:        rgba(9,9,11,0.96);
  --overlay-modal: rgba(0,0,0,0.72);
  --overlay-ins:   rgba(5,5,7,0.78);
}

/* ── DAY — Light Grey Professional ──────────────────────────────────── */
[data-theme="light"] {
  /* Neutral ramp — inverted slate */
  --slate-950: #ffffff;
  --slate-900: #f4f4f6;
  --slate-850: #ebebed;
  --slate-800: #ffffff;
  --slate-750: #f0f0f4;
  --slate-700: #e2e2e6;
  --slate-600: #c8c8ce;
  --slate-500: #6b6b80;
  --slate-400: #8888a0;
  --slate-200: #1e1e2e;
  --white:     #0f0f18;

  /* Action — professional blue */
  --blue-700:  #1d4ed8;
  --blue-600:  #2563eb;
  --blue-500:  #3b82f6;
  --blue-400:  #60a5fa;
  --blue-300:  #2563eb;
  --blue-tint: rgba(59,130,246,0.08);

  /* Semantic accents — darker for contrast on light bg */
  --success:        #16a34a;
  --success-alt:    #15803d;
  --success-bright: #22c55e;
  --warning:        #d97706;
  --danger:         #dc2626;
  --danger-deep:    #b91c1c;
  --purple:         #7c3aed;

  /* Non-chained surfaces */
  --nav-bg:        rgba(244,244,246,0.97);
  --overlay-modal: rgba(15,15,24,0.38);
  --overlay-ins:   rgba(244,244,246,0.78);
}

/* ── --ac-* namespaced aliases (chain off active theme automatically) ── */
:root {
  --ac-bg:          var(--bg-app);
  --ac-surface:     var(--surface-card);
  --ac-surface-sub: var(--surface-sunken);
  --ac-hover:       var(--surface-hover);
  --ac-border:      var(--border);
  --ac-border-str:  var(--border-strong);
  --ac-text-head:   var(--text-heading);
  --ac-text-body:   var(--text-body);
  --ac-text-muted:  var(--text-muted);
  --ac-text-faint:  var(--text-faint);
  --ac-text-note:   var(--text-note);
  --ac-action:      var(--blue-500);
  --ac-action-h:    var(--blue-600);
  --ac-action-l:    var(--blue-400);
  --ac-action-tint: var(--blue-tint);
  --ac-success:     var(--success);
  --ac-warning:     var(--warning);
  --ac-danger:      var(--danger);
  --ac-purple:      var(--purple);
  --ac-nav-bg:      var(--nav-bg);
  --ac-modal-bg:    var(--overlay-modal);
  /* Insurer accents — unchanged in both themes */
  --ac-ins:      var(--ins-ins);      --ac-ins-fill:      var(--ins-ins-fill);
  --ac-assa:     var(--ins-assa);     --ac-assa-fill:     var(--ins-assa-fill);
  --ac-qualitas: var(--ins-qualitas); --ac-qualitas-fill: var(--ins-qualitas-fill);
  --ac-mnk:      var(--ins-mnk);      --ac-mnk-fill:      var(--ins-mnk-fill);
  --ac-lafise:   var(--ins-lafise);   --ac-lafise-fill:   var(--ins-lafise-fill);
}

/* ── Theme toggle button ─────────────────────────────────────────────── */
.ac-theme-btn {
  width: 34px; height: 34px; border-radius: var(--r-lg);
  border: 1px solid var(--border); background: transparent;
  color: var(--text-muted); cursor: pointer;
  display: grid; place-items: center;
  transition: border-color var(--dur-base), color var(--dur-base), background var(--dur-base);
  flex-shrink: 0;
}
.ac-theme-btn:hover {
  border-color: var(--blue-500);
  color: var(--text-heading);
  background: var(--blue-tint);
}

/* ── Light-mode edge-case overrides ─────────────────────────────────────
   These cover a handful of rgba() patterns that can't be expressed as a
   single CSS variable, and one or two component-specific hard-codes.
   Everything else is handled by --slate-* variable resolution above.
   ──────────────────────────────────────────────────────────────────────*/

/* Comparison table: zebra even rows use rgba() — must override explicitly.
   (First-child/frozen-column zebra now lives in results.css as an opaque
   color-mix over theme tokens — no light override needed.) */
[data-theme="light"] #ct tbody tr:not(.ct-divider):not(.ct-prima):nth-child(even) td {
  background: rgba(0,0,0,0.025);
}

/* Nav active link text (hardcoded white in component CSS, must be dark in light) */
[data-theme="light"] .nav-link.active { color: var(--white) !important; }

/* Insurer card header bottom border (hardcoded #334155 in component) */
[data-theme="light"] .insurer-header { border-bottom-color: var(--border) !important; }

/* Coberturas modal row borders */
[data-theme="light"] .cob-modal-row { border-bottom-color: var(--border) !important; }

/* Price row internal dividers (1px solid --slate-900 = light body bg in light, invisible) */
[data-theme="light"] .price-row { border-bottom-color: var(--border) !important; }

/* Success badge on PDF buttons */
[data-theme="light"] .btn-pdf-view { background: rgba(59,130,246,0.08); border-color: rgba(59,130,246,0.18); }
[data-theme="light"] .btn-pdf-dl   { background: rgba(22,163,74,0.08);  border-color: rgba(22,163,74,0.18); }

/* Form card stays white in both themes */
[data-theme="light"] .form-card { background: #ffffff; }

/* Hero h1 sits on a dark photo overlay — must stay white in both themes */
[data-theme="light"] .hero h1 { color: #ffffff; }

/* ── Light-mode: pastel brand tints for each insurer card ───────────────
   IDs win over the base .insurer-card class rule → no !important needed.
   Dark mode is completely untouched (these rules are [data-theme="light"] only).
   ──────────────────────────────────────────────────────────────────────── */
[data-theme="light"] #ins-card      { background-color: #fde8e8; }
[data-theme="light"] #assa-card     { background-color: #e8f0fe; }
[data-theme="light"] #qualitas-card { background-color: #fff3e8; }
[data-theme="light"] #mnk-card      { background-color: #e8f7f5; }
[data-theme="light"] #lafise-card   { background-color: #e8f5eb; }