/* ─────────────────────────────────────────────────────────────
   Two independent axes. Components read ONLY the aliases below.

   data-mode         light | dark        → colours, surfaces, shadows
   data-personality  friendly | technical | editorial
                                          → shape, density, type voice, icon stroke

   Default (:root) = light + friendly (corporate).
   PanelOnline = friendly/light · GeoPilot = technical/dark · Reports & web = editorial/light
   ───────────────────────────────────────────────────────────── */

/* ── MODE: LIGHT ─────────────────────────────────────────── */
:root,
[data-mode="light"] {
  color-scheme: light;
  --bg-page: var(--sw-navy-50);
  --bg-page-top: var(--sw-navy-25);
  --bg-app: var(--sw-navy-0);
  --map-stage: var(--sw-navy-200);
  --surface-solid: var(--sw-navy-0);
  --bg-grid: rgb(var(--sw-teal-rgb) / 0.06);
  --surface-card: var(--sw-navy-0);
  --surface-raised: var(--sw-navy-0);
  --surface-muted: var(--sw-navy-100);
  --surface-soft: var(--sw-ice-100);
  --surface-overlay: rgb(255 255 255 / 0.92);
  --surface-input: var(--sw-navy-0);
  --surface-inverse: var(--sw-navy-900);
  --scrim: rgb(11 22 32 / 0.45);

  --text-primary: var(--sw-navy-900);
  --text-secondary: var(--sw-navy-600);
  --text-subtle: var(--sw-navy-600);
  --text-inverse: var(--sw-navy-0);
  --text-on-accent: var(--sw-navy-900); /* white on teal-500 is 2.8:1; navy-900 is 5.5:1 */
  --text-on-highlight: var(--sw-navy-0);
  --text-link: var(--sw-teal-700);

  --border-default: var(--sw-navy-200);
  --border-soft: var(--sw-navy-100);
  --border-strong: rgb(var(--sw-teal-rgb) / 0.45);

  --accent-solid: var(--sw-teal-500);
  --accent-hover: var(--sw-teal-400);
  --accent-soft: rgb(var(--sw-teal-rgb) / 0.1);
  --accent-fill: var(--sw-teal-50);
  --accent-text: var(--sw-teal-700);
  --highlight: var(--sw-rose-500);
  --highlight-soft: var(--sw-rose-50);
  --attention: var(--sw-salmon-500);

  --success: var(--sw-green-500);
  --success-soft: color-mix(in srgb, var(--sw-green-500) 10%, transparent);
  --warning: var(--sw-amber-600);
  --warning-soft: color-mix(in srgb, var(--sw-amber-300) 22%, transparent);
  --danger: var(--sw-rose-600); /* rose-500 on rose-50 is 4.1:1 */
  --danger-soft: var(--sw-rose-50);
  --info: var(--sw-teal-600);

  --reward: var(--sw-gold);
  --reward-fg: var(--sw-gold-ink);
  --reward-border: var(--sw-gold-border);
  --reward-soft: var(--sw-gold-soft);

  --focus-ring: var(--sw-teal-500);

  --shadow-xs: var(--shadow-light-xs);
  --shadow-sm: var(--shadow-light-sm);
  --shadow-md: var(--shadow-light-md);
  --shadow-lg: var(--shadow-light-lg);
  --shadow-popover: var(--shadow-light-popover);
}

/* ── MODE: DARK ──────────────────────────────────────────── */
[data-mode="dark"] {
  color-scheme: dark;
  --bg-page: var(--sw-navy-950);
  --bg-page-top: #0e1c28;
  --bg-app: linear-gradient(180deg, #0e1c28 0%, var(--sw-navy-950) 100%);
  --map-stage: var(--sw-navy-800);
  --surface-solid: var(--sw-navy-900);
  --bg-grid: rgb(95 208 211 / 0.045);
  --surface-card: rgb(20 37 53 / 0.92);
  --surface-raised: rgb(30 52 71 / 0.95);
  --surface-muted: rgb(255 255 255 / 0.07);
  --surface-soft: rgb(255 255 255 / 0.04);
  --surface-overlay: rgb(11 22 32 / 0.94);
  --surface-input: rgb(255 255 255 / 0.06);
  --surface-inverse: var(--sw-navy-0);
  --scrim: rgb(0 0 0 / 0.62);

  --text-primary: var(--sw-navy-25);
  --text-secondary: var(--sw-navy-200);
  --text-subtle: var(--sw-navy-300);
  --text-inverse: var(--sw-navy-900);
  --text-on-accent: var(--sw-navy-950);
  --text-on-highlight: var(--sw-navy-950);
  --text-link: var(--sw-teal-300);

  --border-default: rgb(255 255 255 / 0.14);
  --border-soft: rgb(255 255 255 / 0.07);
  --border-strong: rgb(95 208 211 / 0.45);

  --accent-solid: var(--sw-teal-300);
  --accent-hover: var(--sw-teal-200);
  --accent-soft: rgb(95 208 211 / 0.1);
  --accent-fill: rgb(14 170 175 / 0.16);
  --accent-text: var(--sw-teal-300);
  --highlight: var(--sw-rose-400);
  --highlight-soft: rgb(230 66 122 / 0.14);
  --attention: var(--sw-salmon-300);

  --success: var(--sw-green-300);
  --success-soft: rgb(80 216 144 / 0.12);
  --warning: var(--sw-amber-300);
  --warning-soft: rgb(255 200 87 / 0.12);
  --danger: var(--sw-rose-300);
  --danger-soft: rgb(230 66 122 / 0.14);
  --info: var(--sw-teal-300);

  --focus-ring: var(--sw-teal-300);

  --shadow-xs: none;
  --shadow-sm: var(--shadow-dark-sm);
  --shadow-md: var(--shadow-dark-md);
  --shadow-lg: var(--shadow-dark-lg);
  --shadow-popover: var(--shadow-dark-md);
}

/* ── PERSONALITY: FRIENDLY (cercana / gamificada) ───────── */
:root,
[data-personality="friendly"] {
  --font-body: var(--font-sans);
  --font-heading: var(--font-sans);
  --font-display: var(--font-serif);
  --font-numeric: var(--font-serif);
  --heading-weight: 800; /* @kind font */
  --display-weight: 400; /* @kind font */
  --body-size: var(--text-sm);
  --body-leading: var(--leading-body); /* @kind font */
  --label-weight: 800; /* @kind font */
  --label-tracking: 0; /* @kind font */
  --button-weight: 600; /* @kind font */

  --radius-card: var(--radius-2xl);
  --radius-panel: var(--radius-2xl);
  --radius-button: var(--radius-lg);
  --radius-control: var(--radius-lg);
  --radius-input: var(--radius-lg);
  --radius-nav-item: var(--radius-xl);
  --radius-chip: var(--radius-full);

  --control-h: 2.75rem;
  --control-h-sm: 2.25rem;
  --control-h-lg: 3rem;
  --field-h: 2.75rem;
  --card-pad: var(--space-5);
  --gap-grid: var(--space-5);

  --icon-stroke: 2; /* @kind other */
  --card-shadow: var(--shadow-xs);
  --card-shadow-hover: var(--shadow-md);
  --press-scale: 0.98; /* @kind other */
  --illustrations: 1; /* @kind other */
}

/* ── PERSONALITY: TECHNICAL (técnica / densa / datos) ───── */
[data-personality="technical"] {
  --font-body: var(--font-sans);
  --font-heading: var(--font-sans);
  --font-display: var(--font-sans);
  --font-numeric: var(--font-mono);
  --heading-weight: 650; /* @kind font */
  --display-weight: 600; /* @kind font */
  --body-size: var(--text-sm);
  --body-leading: 1.45; /* @kind font */
  --label-weight: 800; /* @kind font */
  --label-tracking: 0.04em; /* @kind font */
  --button-weight: 500; /* @kind font */

  --radius-card: var(--radius-lg);
  --radius-panel: var(--radius-lg);
  --radius-button: var(--radius-md);
  --radius-control: var(--radius-sm);
  --radius-input: var(--radius-md);
  --radius-nav-item: var(--radius-sm);
  --radius-chip: var(--radius-full);

  --control-h: 2.5rem;
  --control-h-sm: 2rem;
  --control-h-lg: 3rem;
  --field-h: 2.75rem;
  --card-pad: var(--space-4);
  --gap-grid: var(--space-4);

  --icon-stroke: 1.75; /* @kind other */
  --card-shadow: var(--shadow-sm);
  --card-shadow-hover: var(--shadow-sm);
  --press-scale: 1; /* @kind other */
  --illustrations: 0; /* @kind other */
}

/* ── PERSONALITY: EDITORIAL (informativa / lectura) ─────── */
[data-personality="editorial"] {
  --font-body: var(--font-sans);
  --font-heading: var(--font-serif);
  --font-display: var(--font-serif);
  --font-numeric: var(--font-serif);
  --heading-weight: 400; /* @kind font */
  --display-weight: 400; /* @kind font */
  --body-size: var(--text-base);
  --body-leading: var(--leading-relaxed); /* @kind font */
  --label-weight: 700; /* @kind font */
  --label-tracking: var(--tracking-eyebrow); /* @kind font */
  --button-weight: 600; /* @kind font */

  --radius-card: var(--radius-md);
  --radius-panel: var(--radius-lg);
  --radius-button: var(--radius-full);
  --radius-control: var(--radius-md);
  --radius-input: var(--radius-md);
  --radius-nav-item: var(--radius-md);
  --radius-chip: var(--radius-full);

  --control-h: 2.75rem;
  --control-h-sm: 2.25rem;
  --control-h-lg: 3.25rem;
  --field-h: 2.75rem;
  --card-pad: var(--space-6);
  --gap-grid: var(--space-8);

  --icon-stroke: 1.5; /* @kind other */
  --card-shadow: none;
  --card-shadow-hover: var(--shadow-sm);
  --press-scale: 0.99; /* @kind other */
  --illustrations: 0; /* @kind other */
}