/* ==========================================================================
   Hay Espacio — Design Tokens
   Monochrome-first system. See Identidad_de_Marca for rationale.
   Future color palette (earth tones, green, blue, yellow, coral) plugs in
   here later without touching layout or component files.
   ========================================================================== */

:root {
  /* ---- Color: core (do not add hue yet, brand is monochrome-phase) ---- */
  --color-black: #000000;
  --color-white: #ffffff;
  --color-ink: #141414;      /* body text, softer than pure black */
  --color-paper: #fafafa;    /* page background */
  --color-mist: #8f8f8a;     /* secondary / muted text */
  --color-line: #e4e4e0;     /* borders, dividers */
  --color-line-strong: #cfcfca;
  --color-surface: #f2f2ef;  /* raised surfaces on paper (cards, inputs) */

  /* Semantic aliases — swap these first when color phase 2 lands */
  --color-bg: var(--color-paper);
  --color-fg: var(--color-ink);
  --color-accent: var(--color-black);
  --color-accent-contrast: var(--color-white);
  --color-focus-ring: var(--color-black);

  /* ---- Typography ---- */
  --font-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  /* Swap in a self-hosted geometric sans (e.g. Inter, Sora) later by
     adding @font-face rules in base.css and updating --font-base only. */

  --fs-xs: 0.75rem;   /* 12px */
  --fs-sm: 0.875rem;  /* 14px */
  --fs-base: 1rem;    /* 16px */
  --fs-md: 1.125rem;  /* 18px */
  --fs-lg: 1.5rem;    /* 24px */
  --fs-xl: 2rem;      /* 32px */
  --fs-2xl: 2.75rem;  /* 44px */
  --fs-3xl: 3.75rem;  /* 60px */

  --lh-tight: 1.1;
  --lh-snug: 1.3;
  --lh-normal: 1.55;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;

  --ls-tight: -0.02em;
  --ls-normal: 0;

  /* ---- Spacing scale (4px base) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* ---- Radius ---- */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-full: 999px;

  /* ---- Layout ---- */
  --container-max: 1120px;
  --container-pad: var(--space-5);
  --header-height: 72px;

  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 150ms;
  --dur-base: 250ms;
  --dur-slow: 400ms;

  /* ---- Elevation (kept flat per brand: use sparingly) ---- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
}