/* A Hillier Vineyard — Design Tokens
   Derived from the reference design's CSS variables, adapted to estate-vineyard tone.
*/

:root {
  /* Palette */
  --color-cream: #ECE0D2;
  --color-cream-soft: #F3F3F3;
  --color-warm-brown: #573D21;
  --color-accent-peach: #E3A36E;
  --color-accent-orange: #EFA164;
  --color-blush: #D8978A;
  --color-line: rgba(87, 61, 33, 0.15);

  /* Aliases (semantic) */
  --color-bg: var(--color-cream);
  --color-bg-alt: var(--color-cream-soft);
  --color-text: var(--color-warm-brown);
  --color-text-muted: rgba(87, 61, 33, 0.92);
  --color-text-subtle: rgba(87, 61, 33, 0.65);
  --color-button-bg: var(--color-accent-peach);
  --color-button-bg-hover: var(--color-accent-orange);
  --color-button-text: var(--color-warm-brown);

  /* Typography */
  --font-body: 'Cormorant Garamond', 'Times New Roman', Georgia, serif;
  --font-display: 'Cormorant Garamond', 'Times New Roman', Georgia, serif;
  --font-eyebrow: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;

  --weight-body: 500;
  --weight-medium: 600;

  --letter-spacing-body: 0.06rem;
  --letter-spacing-eyebrow: 0.2em;

  --line-height-tight: 1.1;
  --line-height-default: 1.3;
  --line-height-relaxed: 1.55;

  /* Type scale (base = 2rem = 20px because html font-size: 62.5%) */
  --fs-eyebrow: 1.2rem;     /* 12px */
  --fs-small:   1.4rem;     /* 14px */
  --fs-body:    1.8rem;     /* 18px */
  --fs-body-lg: 2rem;       /* 20px — default body */
  --fs-h4:      2.4rem;     /* 24px */
  --fs-h3:      3rem;       /* 30px */
  --fs-h2:      4.2rem;     /* 42px */
  --fs-h1:      6rem;       /* 60px */
  --fs-display: 8rem;       /* 80px — hero only */

  /* Layout */
  --page-max: 160rem;       /* 1600px */
  --page-pad-x: 4rem;       /* 40px desktop */
  --page-pad-x-mobile: 2rem;
  --section-pad-y: 12rem;   /* 120px desktop */
  --section-pad-y-mobile: 6rem;
  --grid-gap: 0.8rem;       /* 8px */
  --grid-gap-mobile: 0.4rem;

  /* Components */
  --button-radius: 0;
  --input-radius: 0;
  --pill-radius: 4rem;
  --card-radius: 0;

  /* Motion */
  --ease-editorial: cubic-bezier(0.25, 1, 0.5, 1);
  --duration-short: 0.15s;
  --duration-default: 0.3s;
  --duration-long: 0.6s;

  /* Z layers */
  --z-header: 40;
  --z-overlay: 60;
  --z-modal: 80;
}

@media (max-width: 767px) {
  :root {
    --fs-h1: 4.2rem;
    --fs-h2: 3.2rem;
    --fs-h3: 2.4rem;
    --fs-display: 5.4rem;
    --section-pad-y: var(--section-pad-y-mobile);
    --page-pad-x: var(--page-pad-x-mobile);
    --grid-gap: var(--grid-gap-mobile);
  }
}