/* CristobalVarela.com design tokens
   Direction: Modern Executive Editorial
   Light-first, with a dark hero and selected dark bands. */

:root {
  /* Color: from the approved brief */
  --color-bg: #F7F6F2;           /* warm ivory: main background */
  --color-surface: #E8E5DF;      /* stone: alternating light sections */
  --color-dark: #1C2026;         /* charcoal: hero, ventures, contact, footer */
  --color-slate: #404956;        /* supporting dark surfaces, icons */
  --color-accent: #FF9000;       /* primary orange: CTAs on dark, small accents */
  --color-accent-hover: #DF711D; /* hover for orange fills */
  --color-accent-text: #A84F08;  /* orange text on ivory and white: 5.1:1 */
  --color-ink: #22262E;          /* body text on light */
  --color-muted: #5C626C;        /* secondary text on light */
  --color-white: #FFFFFF;

  /* Color: derived, to keep contrast and dividers consistent */
  --color-accent-text-stone: #9A4807;       /* orange text on stone: 5.1:1 (the brief's #A84F08 is 4.4:1 there) */
  --color-on-dark-muted: #C9CDD4;          /* secondary text on charcoal */
  --color-line-light: #D4D0C8;             /* dividers on ivory and stone */
  --color-line-strong: #8B8F97;            /* borders that must be seen on light */
  --color-line-dark: rgba(255, 255, 255, 0.16); /* dividers on charcoal */
  --color-card-dark: #252A32;              /* cards on charcoal */

  /* Type */
  --font-sans: "Manrope", "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Instrument Serif", Georgia, "Times New Roman", serif;

  --text-xs: 0.8125rem;   /* 13px: eyebrows, chips */
  --text-sm: 0.9375rem;   /* 15px: metadata */
  --text-base: 1.0625rem; /* 17px: body, phones */
  --text-lg: 1.25rem;     /* 20px: lead paragraphs */
  --text-h3: clamp(1.3rem, 1.1rem + 0.8vw, 1.6rem);
  --text-h2: clamp(1.9rem, 1.3rem + 2.4vw, 3.1rem);
  --text-display: clamp(2.2rem, 1.2rem + 3.6vw, 4rem);
  --text-hero: clamp(1.8rem, 8.2vw, 3.4rem);

  --leading-tight: 1.08;
  --leading-snug: 1.3;
  --leading-body: 1.65;
  --tracking-tight: -0.03em;
  --tracking-eyebrow: 0.14em;

  /* Space */
  --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;
  --section-y: clamp(3.75rem, 2.5rem + 5vw, 6.5rem);
  --gutter: clamp(1.25rem, 5vw, 3rem);
  --container: 75rem;      /* 1200px */
  --measure: 38rem;        /* comfortable line length */

  /* Shape */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* Motion */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --duration: 180ms;

  /* Layout */
  --header-h: 4.25rem;
}

@media (min-width: 62rem) {
  :root {
    --text-base: 1.125rem; /* 18px on desktop */
    --text-hero: clamp(2.8rem, 4.5vw, 4.4rem);
  }
}