/* ─────────────────────────────────────────────────────────────
   Reparios - shared design tokens
   Linked by index.html, aviso-legal.html, en/index.html, en/legal-notice.html
   See CONTRIBUTING.md for usage rules (no hardcoded hex, no arbitrary font-sizes).
   ───────────────────────────────────────────────────────────── */

:root {
  /* Surfaces */
  --bg:        #F5F1EA;     /* warm cream - page background */
  --bg-card:   #FFFFFF;     /* cards */
  --bg-soft:   #FAF7F1;
  --bg-dark:   #0B0E20;     /* manifesto / cta blocks */
  --bg-darker: #06070F;

  /* Brand accent (indigo) */
  --accent:    #4F46E5;
  --accent-h:  #4338CA;
  --accent-li: #818CF8;

  /* Ink (text) scale */
  --ink:        #0B0E20;
  --ink-darker: #15192f;    /* primary button hover, dark borders on dark cards */
  --ink-mid:    #374162;
  --ink-light:  #5C6885;    /* AA on white (5.5:1) and cream (5.0:1) */
  --ink-mute:   #A0A8BD;

  /* Lines (borders on warm bg) */
  --line:      #E4E0D6;
  --line-h:    #C9C2B0;
  --line-card: #ECE7DC;

  --white:     #FFFFFF;

  /* ── Platform console tokens (mirror platform Tailwind palette) ── */
  --pc-ink: #0D0D0D;
  --pc-ink-mid: #3D3C39;
  --pc-ink-light: #888780;
  --pc-surface: #F7F6F2;
  --pc-line: #E5E4DD;
  --pc-white: #FFFFFF;
  --pc-sidebar: #0B0E20;       /* dark sidebar, aligned with marketing ink navy */
  --pc-sidebar-mid: #1A1E33;
  --pc-sidebar-text: #B6B8C6;

  --pc-brand-50: #EEF2FF;
  --pc-brand-200: #C7D2FE;
  --pc-brand-700: #4338CA;
  --pc-brand-900: #312E81;

  --pc-emerald-50: #ECFDF5;  --pc-emerald-200: #A7F3D0;  --pc-emerald-700: #047857;
  --pc-amber-50: #FFFBEB;    --pc-amber-300: #FCD34D;    --pc-amber-700: #B45309;
  --pc-red-50: #FEF2F2;      --pc-red-300: #FCA5A5;      --pc-red-700: #B91C1C;
  --pc-blue-50: #EFF6FF;     --pc-blue-200: #BFDBFE;     --pc-blue-700: #1D4ED8;
  --pc-gray-50: #F9FAFB;     --pc-gray-200: #E5E7EB;     --pc-gray-400: #9CA3AF;
  --pc-gray-500: #6B7280;    --pc-gray-600: #4B5563;     --pc-gray-700: #374151;

  /* Typography scale - use these tokens; do not add new arbitrary rem values.
     If a recurring size doesn't fit, extend the scale here first. */
  --fs-2xs:  0.7rem;        /* 11.2px - tiny labels, footer fine print */
  --fs-xs:   0.78rem;       /* 12.5px - meta, eyebrow labels */
  --fs-sm:   0.83rem;       /* 13.3px - captions, small body */
  --fs-base: 0.86rem;       /* 13.8px - default body in compact contexts */
  --fs-md:   0.95rem;       /* 15.2px - comfortable body */
  --fs-lg:   1rem;          /* 16px   - emphasized body, large nav links */
  --fs-xl:   1.2rem;        /* 19.2px - logo, callouts */
  --fs-2xl:  1.35rem;       /* 21.6px - small section headings */

  /* Display sizes - clamp() pairs for hero / section H1s.
     Use these via class names defined per page (heroes vary). */
  --fs-display-sm:   clamp(1.6rem, 2.6vw, 2.6rem);
  --fs-display-md:   clamp(1.9rem, 3.2vw, 3rem);
  --fs-display-lg:   clamp(2rem,   4vw,   3.4rem);
  --fs-display-xl:   clamp(2.1rem, 5vw,   4.4rem);
  --fs-display-huge: clamp(6rem,   14vw,  16rem);
}

/* Base reset + body - shared across all four pages */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Outfit', sans-serif;
  background: var(--bg);
  color: var(--ink);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }

/* Keyboard focus - visible ring for all interactive elements (shared) */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Respect reduced-motion preference (marquee, pulses, reveals, smooth scroll) */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}