/* OWNER: Frontend Developer
   FILE: assets/css/variables.css  (design tokens — SINGLE SOURCE OF TRUTH)
   Contract: token names/values are frozen in ARCHITECTURE.md §6.
   Rule: styles.css (and any future CSS) may ONLY consume these via var(--token). */

/* =====================================================================
   §6 token block — copied VERBATIM from ARCHITECTURE.md (do not edit)
   ===================================================================== */
:root {
  /* Brand — "papel y verdín" */
  --color-bg:            #E9E6DE;  /* paper (page background) */
  --color-surface:       #F2F0EA;  /* a laid sheet / raised panel */
  --color-surface-2:     #DFDBCF;  /* inset panel on paper */
  --color-border:        #CFC9BC;  /* rule/line on paper */

  --color-text:          #1B1A16;  /* ink */
  --color-text-muted:    #5C584E;  /* secondary text on paper */

  --color-accent:        #1E5B4C;  /* verdigris — links, marks */
  --color-accent-strong: #14453A;  /* hover/active */
  --color-accent-soft:   #3C7A68;  /* verdigris on dark fills / large accents */
  --color-on-accent:     #F0EDE6;  /* paper text on accent/ink fills */

  --color-success:       #2F6B4F;
  --color-danger:        #8E2C1E;
  --color-focus:         #14453A;  /* focus ring on light surfaces */

  --font-serif: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, "Times New Roman", serif;
  --font-sans:  "Optima", "Candara", "Corbel", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --font-mono:  ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --fs-xs:   0.8125rem;
  --fs-sm:   0.9375rem;
  --fs-base: 1.125rem;   /* 18px body */
  --fs-lg:   1.3125rem;
  --fs-xl:   1.75rem;
  --fs-2xl:  2.25rem;
  --fs-3xl:  3rem;
  --fs-4xl:  4rem;
  --lh-tight: 1.08;
  --lh-base:  1.7;
  --fw-regular: 400;
  --fw-medium:  600;
  --fw-bold:    700;

  --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;

  --radius-sm: 2px; --radius-md: 4px; --radius-lg: 6px; --radius-pill: 999px;

  --container-max: 1200px;
  --container-pad: clamp(1rem, 4vw, 2rem);

  --shadow-sm: 0 1px 0 rgba(27,26,22,.08);
  --shadow-md: 0 14px 34px -22px rgba(27,26,22,.40);
  --shadow-lg: 0 30px 70px -40px rgba(27,26,22,.50);
  --transition: 180ms ease;

  --bp-sm: 640px; --bp-md: 900px; --bp-lg: 1200px;
}

/* =====================================================================
   Frontend extensions (below the frozen block) — safe to extend.
   ===================================================================== */
:root {
  /* Layout helpers */
  --container-narrow: 680px;
  --header-height: 76px;
  --mobile-cta-height: 60px;

  /* Z-index scale */
  --z-header: 100;
  --z-mobile-cta: 90;
  --z-cookie-banner: 150; /* above the header, below the skip link */
  --z-skip: 200;

  /* Effects helpers */
  --ring: 0 0 0 3px var(--color-bg), 0 0 0 5px var(--color-focus);
  --transition-slow: 320ms ease;
}