/* ==========================================================================
   Psicología Perú — Design tokens
   Single source of truth for color, type, spacing, radius, elevation, motion.
   Mirrored in platform/ (Tailwind theme). Change here first.
   ========================================================================== */
:root {
  /* Color — brand */
  --c-forest-deep: #17382d;
  --c-forest: #214a3a;
  --c-paper: #f5f2ea;
  --c-paper-2: #ece7dc;
  --c-white: #fbfaf6;
  --c-ink: #171814;
  --c-ink-2: #22241f;
  --c-muted: #5f625c;
  --c-coral: #e86a4a;
  --c-coral-ink: #b8462b;   /* coral for text on light bg (AA) */
  --c-mustard: #d5a83f;
  --c-mint: #b9d8c6;
  --c-blue: #4e6d8d;
  --c-stone: #d8d5cb;
  --c-line: #d9d4c8;
  --c-line-strong: #b9b3a6;

  /* Color — semantic */
  --bg: var(--c-paper);
  --bg-raised: var(--c-white);
  --bg-sunken: var(--c-paper-2);
  --fg: var(--c-ink);
  --fg-muted: var(--c-muted);
  --border: var(--c-line);
  --focus: #1f6feb;
  --success: #2f7a55;
  --warning: #a8781a;
  --danger: #b43a26;

  /* Section accents (override --accent per section) */
  --accent-actualidad: var(--c-forest);
  --accent-investigacion: var(--c-blue);
  --accent-observatorio: var(--c-forest-deep);
  --accent-podcast: var(--c-coral);
  --accent-red: var(--c-mint);
  --accent-agenda: var(--c-mustard);
  --accent: var(--c-forest);

  /* Data-viz sequential (forest ramp) + categorical */
  --viz-1: #dcebe2; --viz-2: #b9d8c6; --viz-3: #86b79c; --viz-4: #4f8a6d; --viz-5: #214a3a;
  --viz-cat-1: #214a3a; --viz-cat-2: #e86a4a; --viz-cat-3: #4e6d8d; --viz-cat-4: #d5a83f; --viz-cat-5: #8a7a67;

  /* Typography */
  --font-serif: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-sans: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  /* Type scale — fluid, 1.25 base ratio on mobile → ~1.333 on desktop */
  --fs-micro: 0.6875rem;   /* 11 */
  --fs-xs: 0.75rem;        /* 12 */
  --fs-sm: 0.875rem;       /* 14 */
  --fs-base: 1rem;         /* 16 */
  --fs-md: 1.125rem;       /* 18 */
  --fs-lg: clamp(1.25rem, 1.1rem + .5vw, 1.5rem);
  --fs-xl: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  --fs-2xl: clamp(1.875rem, 1.4rem + 1.6vw, 2.75rem);
  --fs-3xl: clamp(2.25rem, 1.5rem + 2.8vw, 3.875rem);
  --fs-4xl: clamp(2.75rem, 1.6rem + 4.6vw, 5.5rem);
  --fs-display: clamp(3.1rem, 1.4rem + 6.6vw, 7.25rem);
  --lh-tight: 0.95;
  --lh-snug: 1.12;
  --lh-body: 1.6;
  --lh-read: 1.72;
  --tracking-display: -0.045em;
  --tracking-title: -0.025em;
  --tracking-label: 0.14em;

  /* Spacing — 4px base */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px;
  --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px; --s-32: 128px;
  --section-y: clamp(64px, 5vw + 40px, 120px);

  /* Layout */
  --container: 1280px;
  --container-wide: 1440px;
  --container-read: 700px;
  --gutter: clamp(16px, 3vw, 32px);
  --grid-gap: clamp(16px, 2vw, 28px);

  /* Radius */
  --r-xs: 4px; --r-sm: 8px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-pill: 999px;

  /* Elevation — restrained; editorial relies on rules, not shadows */
  --shadow-1: 0 1px 0 rgba(23, 24, 20, .06);
  --shadow-2: 0 10px 30px -12px rgba(23, 24, 20, .18);
  --shadow-3: 0 30px 80px -24px rgba(12, 20, 16, .35);

  /* Motion */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur-1: 120ms; --dur-2: 220ms; --dur-3: 420ms;

  /* Z */
  --z-header: 80; --z-drawer: 120; --z-modal: 150; --z-toast: 200;

  /* Breakpoints (reference — used in media queries):
     sm 480 · md 720 · lg 1024 · xl 1280 · 2xl 1536 */
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-1: 0ms; --dur-2: 0ms; --dur-3: 0ms; }
}