/* ============================================================
   A2 Big Data — Design Tokens
   Paleta: blanco hueso + azul profundo + coral acento
   ============================================================ */

:root {
  /* ---------- Color (Light) ---------- */
  --bone: #F5F3EE;
  --bone-2: #EDEAE1;
  --bone-3: #E3DFD3;

  --ink: #0B2A3B;        /* azul profundo — primario */
  --ink-2: #0F3446;
  --ink-soft: #2C4456;

  --coral: #D97757;      /* acento cálido CTA */
  --coral-deep: #BF5A3C;

  --rule: #0B2A3B22;     /* líneas finas */
  --rule-soft: #0B2A3B14;
  --paper-grid: #0B2A3B08;

  /* Semánticos */
  --bg: var(--bone);
  --bg-elev: #FBFAF6;
  --bg-sunk: var(--bone-2);
  --fg: var(--ink);
  --fg-muted: var(--ink-soft);
  --fg-faint: #5C7284;
  --accent: var(--coral);
  --accent-ink: #FFFFFF;
  --border: var(--rule);
  --border-strong: #0B2A3B55;

  /* ---------- Type ---------- */
  --font-sans: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'Space Mono', 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Escala tipográfica fluida (min..max) */
  --fs-xs:   clamp(11px, 0.72rem + 0.05vw, 12px);
  --fs-sm:   clamp(13px, 0.82rem + 0.08vw, 14px);
  --fs-base: clamp(15px, 0.94rem + 0.1vw, 16px);
  --fs-md:   clamp(17px, 1.05rem + 0.15vw, 19px);
  --fs-lg:   clamp(20px, 1.18rem + 0.4vw, 24px);
  --fs-xl:   clamp(28px, 1.5rem + 1.2vw, 40px);
  --fs-2xl:  clamp(40px, 2rem + 2.5vw, 64px);
  --fs-3xl:  clamp(56px, 2.5rem + 4vw, 104px);

  --lh-tight: 1.05;
  --lh-snug: 1.22;
  --lh-normal: 1.5;
  --lh-loose: 1.7;

  /* ---------- Layout ---------- */
  --container: 1320px;
  --gutter: clamp(20px, 3vw, 48px);
  --radius-sm: 2px;
  --radius: 4px;
  --radius-lg: 6px;

  /* ---------- Motion ---------- */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 140ms;
  --t: 260ms;
  --t-slow: 560ms;

  color-scheme: light;
}

/* ---------- Color (Dark) ---------- */
:root[data-theme="dark"] {
  --bone: #0A1519;
  --bone-2: #0E1D24;
  --bone-3: #13262E;

  --ink: #E9EEF0;
  --ink-2: #DFE6EA;
  --ink-soft: #9FB1BB;

  --coral: #E58A6C;
  --coral-deep: #D97757;

  --rule: #E9EEF022;
  --rule-soft: #E9EEF012;
  --paper-grid: #E9EEF008;

  --bg: #070E12;
  --bg-elev: #0E1D24;
  --bg-sunk: #050A0D;
  --fg: var(--ink);
  --fg-muted: var(--ink-soft);
  --fg-faint: #7A8F99;
  --accent: var(--coral);
  --accent-ink: #0A1519;
  --border: var(--rule);
  --border-strong: #E9EEF055;

  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bone: #0A1519;
    --bone-2: #0E1D24;
    --bone-3: #13262E;
    --ink: #E9EEF0;
    --ink-2: #DFE6EA;
    --ink-soft: #9FB1BB;
    --rule: #E9EEF022;
    --rule-soft: #E9EEF012;
    --paper-grid: #E9EEF008;
    --bg: #070E12;
    --bg-elev: #0E1D24;
    --bg-sunk: #050A0D;
    --fg: var(--ink);
    --fg-muted: var(--ink-soft);
    --fg-faint: #7A8F99;
    --accent: #E58A6C;
    --accent-ink: #0A1519;
    --border: var(--rule);
    --border-strong: #E9EEF055;
    color-scheme: dark;
  }
}