/* ==========================================================================
   Design tokens — Teobaldo Corro Acuarelas
   Source of truth: project-docs/03_Design_System.md
   Do not add raw hex values in component files. Add a token here instead.
   ========================================================================== */

:root {
  /* ---------------------------------------------------------------------
     Typography families — 03 §6.4 (closed)
     Georgia is a load-time fallback only, never a design alternative.
     --------------------------------------------------------------------- */
  --font-display: "Fraunces", Georgia, serif;
  --font-body: "DM Sans", system-ui, -apple-system, sans-serif;

  /* ---------------------------------------------------------------------
     Colour — 03 §6 and §7.2 (closed)
     The extended palette was approved in the Casa Familiar mockup review
     (CHANGELOG_auditoria.md, Ronda 10).
     --------------------------------------------------------------------- */
  --color-papel: #f4efe6;          /* main canvas: dominant page background   */
  --color-papel-oscuro: #e8e0d0;   /* raised surfaces, heros, positive logo bg */
  --color-tierra: #4a3c32;         /* dark sections, footer, negative logo bg  */
  --color-tinta: #2e231a;          /* body and heading text: maximum contrast  */
  --color-sepia: #6a4d3c;          /* secondary text, captions, labels         */
  --color-arcilla: #b87861;        /* icons, active borders — never small text */
  --color-arcilla-oscuro: #7a4a35; /* link hover, accent text                  */
  --color-oliva: #7a8368;          /* decorative only — never dominant, never text */
  --color-linea: #ddd3c4;          /* dividers, card borders, soft alt surfaces */

  /* Primary action. #b5502a is the only permitted primary CTA colour (03 §6.2).
     The editorial accent must never be substituted for it. */
  --color-cta: #b5502a;
  --color-cta-text: #ffffff;
  --color-cta-hover: #98421f;
  --color-cta-active: #7f3519;

  /* Editorial accent — 03 §6.3. Numbering, stars, rules, micro-highlights.
     Absorbed by the extended palette; kept because AGENTS.md §2.4 and
     08 §2.6 both declare it as a required token. */
  --color-acento-editorial: #c4872e;

  /* ---------------------------------------------------------------------
     Semantic colour roles — 03 §7.2
     Components consume these, not the raw palette above.
     --------------------------------------------------------------------- */
  --surface-base: var(--color-papel);
  --surface-raised: var(--color-papel-oscuro);
  --surface-dark: var(--color-tierra);
  --surface-subtle: var(--color-linea);

  --text-strong: var(--color-tinta);
  --text-body: var(--color-tinta);
  --text-muted: var(--color-sepia);
  --text-accent: var(--color-arcilla-oscuro);
  --text-on-dark: var(--color-papel-oscuro);
  --text-on-dark-muted: #cdbfa8; /* derived: papel-oscuro dimmed for secondary
                                    text on --surface-dark, keeps AA at 16px */

  --border-subtle: var(--color-linea);
  --border-active: var(--color-arcilla);
  --border-on-dark: #6b5a4c; /* derived: visible hairline on --surface-dark */

  --accent-graphic: var(--color-arcilla);
  --accent-decorative: var(--color-oliva);

  --action-primary: var(--color-cta);
  --action-primary-text: var(--color-cta-text);
  --action-primary-hover: var(--color-cta-hover);
  --action-primary-active: var(--color-cta-active);

  /* Focus. Derived from the closed palette rather than newly invented:
     arcilla-oscuro reaches AA on both paper surfaces, and the ring is always
     paired with an offset so focus never depends on colour alone (03 §6.3, §19.2). */
  --focus-ring: var(--color-arcilla-oscuro);
  --focus-ring-on-dark: var(--color-papel-oscuro);
  --focus-ring-width: 2px;
  --focus-ring-offset: 3px;

  /* There is no green in the palette. Success states use arcilla-oscuro (03 §7.2). */
  --state-success: var(--color-arcilla-oscuro);
  --state-error: var(--color-cta-active);

  /* ---------------------------------------------------------------------
     Type scale — 03 §6.5
     --------------------------------------------------------------------- */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-md: 1.125rem;
  --text-lg: 1.25rem;

  --text-h4: clamp(1.125rem, 1rem + 0.35vw, 1.375rem);
  --text-h3: clamp(1.375rem, 1.15rem + 0.7vw, 1.875rem);
  --text-h2: clamp(2rem, 1.55rem + 1.7vw, 3.25rem);
  /* Reduced 2026-08-03 (Teo, audit-approved): was clamp(2.6rem, 1.8rem +
     3vw, 5.25rem) — the H1 alone filled most of the first viewport on every
     page sharing .h-1 (Home, Casa Familiar, Contacto, Portfolio, Sobre mí).
     Independent of --text-h2/h3/h4/display (confirmed: none of them
     reference --text-h1 in any formula), so this touches only this one
     token. Targets: 390px->40px, 768px->47.2px, 1024px->53.6px,
     1440px(+)->64px max.

     P2, deferred by Teo 2026-08-03 — not a bug, do not "fix" without his
     input: at this size, Home (index.php) and Sobre mí (sobre-mi/index.php)
     land at 6 and 4 lines @1440 respectively, past the 3-4 / 2-3 orientative
     target — their approved H1 copy is simply longer than Casa Familiar's
     at the same shared column width/ratio. Casa Familiar (the launch
     priority) hits its target exactly; neither Home nor Sobre mí is visually
     broken. Two real fixes exist (shorten the closed brand copy, or widen
     Home's text column and break the 43.5/56.5 ratio it shares with Casa
     Familiar) — both need Teo's decision, revisit after launch. */
  --text-h1: clamp(2.5rem, 1.75rem + 2.5vw, 4rem);
  --text-display: clamp(3.25rem, 2rem + 5vw, 7.5rem);

  /* Line height — 03 §6.6 */
  --leading-display: 1.02;
  --leading-h1: 1.05;
  --leading-h2: 1.14;
  --leading-h3: 1.22;
  --leading-body: 1.65;
  --leading-tight: 1.4;

  /* Measure — 03 §6.7 */
  --measure-body: 66ch;
  --measure-emphasis: 38ch;
  --measure-hero-subtitle: 36ch;
  --measure-faq: 70ch;
  --measure-legal: 80ch;

  /* Uppercase eyebrow tracking — 03 §6.9 */
  --tracking-eyebrow: 0.1em;

  /* ---------------------------------------------------------------------
     Spacing — 03 §8.2
     --------------------------------------------------------------------- */
  --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;
  --space-10: 8rem;
  --space-11: 10rem;

  /* Section rhythm — 03 §8.3. Fluid so sections do not all share one padding. */
  --section-compact: clamp(3rem, 2.2rem + 3vw, 5rem);
  --section-standard: clamp(4rem, 2.8rem + 5vw, 7.5rem);
  --section-editorial: clamp(5rem, 3.2rem + 7vw, 11rem);

  /* Section-spacing scale, 2026-08-03 (Teo, audit-approved) — additive,
     does not replace --section-compact/standard/editorial above (those stay
     the default for every page not touched this round). Introduced because
     --section-standard was doing double duty as both "space between two
     unrelated blocks" and "space inside one continuous sequence", applied
     identically to 5 back-to-back sections on Casa Familiar regardless of
     how closely related their content was.
     ~1440px / ~768px / ~390px, orientative: */
  --space-section-compact: var(--section-compact); /* 80px / ~58px / 48px — already correct, reused as-is */
  --space-section-default: clamp(3rem, 1.8rem + 3.5vw, 5rem); /* ~80px / ~63px / 48px */
  --space-section-generous: clamp(4rem, 2.5rem + 4vw, 6.5rem); /* ~98px / ~79px / 64px — was --section-editorial's 152px for hero sections specifically */
  --space-section-transition: clamp(2rem, 1.5rem + 3vw, 4rem); /* ~64px / ~47px / ~36px — tighter, for two sections that read as one continuous sequence */

  /* ---------------------------------------------------------------------
     Containers and gutters — 03 §9.1, §9.2
     --------------------------------------------------------------------- */
  --container-wide: 80rem;      /* 1280 */
  --container-default: 73.75rem; /* 1180 */
  --container-narrow: 47.5rem;  /* 760  */
  --container-reading: 42.5rem; /* 680  */

  --gutter: 20px;

  /* ---------------------------------------------------------------------
     Radius — 03 §14.2
     --------------------------------------------------------------------- */
  --radius-sm: 2px;
  --radius-control: 4px;
  --radius-card: 6px;
  --radius-image: 4px;
  --radius-pill: 999px;

  /* ---------------------------------------------------------------------
     Motion — 03 §17.2
     --------------------------------------------------------------------- */
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 400ms ease;

  /* ---------------------------------------------------------------------
     Z-index scale — 08 §8.9. Never use arbitrary values such as 99999.
     --------------------------------------------------------------------- */
  --z-base: 0;
  --z-sticky: 10;
  --z-dropdown: 20;
  --z-overlay: 40;
  --z-modal: 50;
  --z-toast: 60;

  /* Minimum touch target — 03 §18.5 */
  --touch-target: 44px;
  --touch-target-primary: 48px;
}

/* Gutters scale with the viewport — 03 §9.2.
   Breakpoints follow 03 §9.5: sm 36rem, md 48rem, lg 64rem, xl 80rem.
   They live in media queries because custom properties cannot be used there. */
@media (min-width: 48rem) {
  :root {
    --gutter: 32px;
  }
}

@media (min-width: 64rem) {
  :root {
    --gutter: 48px;
  }
}

@media (min-width: 80rem) {
  :root {
    --gutter: 64px;
  }
}