/* ============================================================
   Design tokens · Developer Portfolio
   Tema claro pastel por defecto · tema espresso via [data-theme="dark"]
   ============================================================ */

:root {
  /* ---------- Tipografía de sistema ---------- */
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Code", "SF Mono", "JetBrains Mono",
    Menlo, Consolas, "Liberation Mono", monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: clamp(2rem, 5vw, 3rem);
  --text-5xl: clamp(2.5rem, 7vw, 4.5rem);

  --leading-tight: 1.15;
  --leading-normal: 1.5;
  --leading-loose: 1.75;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* ---------- Espaciado · escala 8pt ---------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  /* ---------- Radios ---------- */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1.25rem;
  --radius-full: 9999px;

  /* ---------- Layout ---------- */
  --container-max: 72rem;
  --container-narrow: 42rem;
  --measure: 65ch;
  --header-height: 4rem;

  /* ---------- Elevación ---------- */
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.1);
  --shadow-md: 0 6px 16px rgb(0 0 0 / 0.14);
  --shadow-lg: 0 16px 40px rgb(0 0 0 / 0.22);

  /* ---------- Movimiento ---------- */
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 450ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* ---------- Z-index ---------- */
  --z-header: 100;
  --z-skip: 200;

  /* ---------- Otros ---------- */
  --header-bg: color-mix(in srgb, var(--bg) 86%, transparent);

  /* ==========================================================
     Tema oscuro (espresso/mocha)
     ========================================================== */
  --bg: #201a14;
  --bg-elevated: #29221b;
  --bg-muted: #332a21;
  --text: #f2e8d5;
  --text-muted: #bba892;
  --text-faint: #907e6a;
  --border: #403426;
  --border-strong: #524234;
  --accent: #e5a39a;
  --accent-strong: #f0bcb4;
  --accent-contrast: #2b1c18;
  --accent-soft: #e7c175;
  --link: #e5a39a;
  --tag-bg: #332a21;
  --tag-fg: #bba892;
  --btn-bg: #8a6f5c;
  --btn-bg-hover: #9a7d69;
  --btn-fg: #f2e8d5;
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent) 45%, transparent);
  --selection-bg: var(--accent-soft);
  --selection-fg: #2b1e14;

  color-scheme: dark;
}

/* ============================================================
   Tema claro (crema · café · pastel)
   ============================================================ */
[data-theme="light"] {
  --bg: #fbf9f6;
  --bg-elevated: #ffffff;
  --bg-muted: #f6f1ed;
  --text: #0a192f;
  --text-muted: #4a5568;
  --text-faint: #7c8698;
  --border: #d4af37;
  --border-strong: #c49b2b;
  --accent: #d81b60;
  --accent-strong: #c01359;
  --accent-contrast: #ffffff;
  --accent-soft: #f8bbd0;
  --link: #d81b60;
  --tag-bg: #fce4ec;
  --tag-fg: #d81b60;
  --btn-bg: #d81b60;
  --btn-bg-hover: #c01359;
  --btn-fg: #ffffff;
  --selection-bg: var(--accent-soft);
  --selection-fg: #0a192f;

  --shadow-sm: 0 1px 2px rgb(10 25 47 / 0.08);
  --shadow-md: 0 6px 16px rgb(10 25 47 / 0.1);
  --shadow-lg: 0 16px 40px rgb(10 25 47 / 0.14);

  color-scheme: light;
}