/* ===========================================================================
   Don Oliva — Design tokens
   Consolidated from the Don Oliva design system (fonts + colors + type +
   spacing + base normalization). Fresh greens, olive-oil gold accent, warm
   sand neutrals.
   =========================================================================== */

/* --- Webfonts (Google Fonts stand-ins for the brand voice) --------------- */
@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,300..600;1,6..72,300..500&family=Hanken+Grotesk:wght@400;500;600;700;800&family=Spline+Sans+Mono:wght@400;500;600&display=swap');

:root {
  /* --- Brand green (verde hoja / oliva) --------------------------------- */
  --green-50:  #f3f8ea;
  --green-100: #e6f0d5;
  --green-200: #cfe3b4;
  --green-300: #b0d189;
  --green-400: #8cba60;
  --green-500: #6ba03f;   /* fresh leaf */
  --green-600: #517f30;   /* PRIMARY */
  --green-700: #3e6327;
  --green-800: #314d21;
  --green-900: #29401e;
  --green-950: #16240f;

  /* --- Olive-oil gold (acento dorado) ---------------------------------- */
  --gold-50:  #faf4e4;
  --gold-100: #f3e6c4;
  --gold-200: #e8cf8e;
  --gold-300: #dcb858;
  --gold-400: #d0a23a;
  --gold-500: #b9872a;   /* ACCENT */
  --gold-600: #976a20;
  --gold-700: #74501b;

  /* --- Warm earthy neutrals (sand / cream / clay) ---------------------- */
  --sand-50:  #fbf8f1;   /* page cream */
  --sand-100: #f5efe2;
  --sand-200: #ece3cf;
  --sand-300: #ddd0b4;
  --sand-400: #c6b694;
  --sand-500: #a89674;
  --sand-600: #87765a;
  --sand-700: #635646;
  --sand-800: #443c31;
  --sand-900: #2c2820;   /* warm ink */
  --sand-950: #1b1813;

  /* --- Pure-ish helpers ------------------------------------------------ */
  --white: #ffffff;
  --black: #16140f;

  /* --- Semantic palettes ---------------------------------------------- */
  --terracotta-500: #c0492b;   /* error / sale */
  --terracotta-600: #a23a20;
  --terracotta-100: #f6ddd3;
  --teal-500: #3e7c71;         /* info / sage-teal */
  --teal-600: #2f6058;
  --teal-100: #d7e8e4;
  --amber-500: #c98a1e;        /* warning */
  --amber-100: #f7e6c4;

  /* ===================================================================== */
  /* SEMANTIC ALIASES                                                       */
  /* ===================================================================== */

  /* Brand */
  --brand-primary: var(--green-600);
  --brand-primary-hover: var(--green-700);
  --brand-primary-active: var(--green-800);
  --brand-accent: var(--gold-500);
  --brand-accent-hover: var(--gold-600);
  --brand-deep: var(--green-900);

  /* Surfaces */
  --surface-page: var(--sand-50);
  --surface-card: var(--white);
  --surface-raised: var(--white);
  --surface-sunken: var(--sand-100);
  --surface-muted: var(--sand-100);
  --surface-inverse: var(--green-900);
  --surface-brand-soft: var(--green-50);
  --surface-accent-soft: var(--gold-50);

  /* Text */
  --text-strong: var(--sand-900);
  --text-body: var(--sand-800);
  --text-muted: var(--sand-600);
  --text-subtle: var(--sand-500);
  --text-on-brand: var(--sand-50);
  --text-on-accent: var(--sand-950);
  --text-inverse: var(--sand-50);
  --text-link: var(--green-700);

  /* Borders */
  --border-subtle: var(--sand-200);
  --border-default: var(--sand-300);
  --border-strong: var(--sand-400);
  --border-brand: var(--green-600);
  --border-focus: var(--green-500);

  /* Feedback */
  --success: var(--green-600);
  --success-soft: var(--green-50);
  --warning: var(--amber-500);
  --warning-soft: var(--amber-100);
  --danger: var(--terracotta-500);
  --danger-soft: var(--terracotta-100);
  --info: var(--teal-500);
  --info-soft: var(--teal-100);

  /* Focus ring */
  --ring: color-mix(in srgb, var(--green-500) 45%, transparent);

  /* Families */
  --font-display: 'Newsreader', 'Iowan Old Style', Georgia, serif;
  --font-sans: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'Spline Sans Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Type scale (rem, 1rem = 16px) */
  --text-xs:   0.75rem;   /* 12 */
  --text-sm:   0.875rem;  /* 14 */
  --text-base: 1rem;      /* 16 */
  --text-md:   1.125rem;  /* 18 */
  --text-lg:   1.375rem;  /* 22 */
  --text-xl:   1.75rem;   /* 28 */
  --text-2xl:  2.25rem;   /* 36 */
  --text-3xl:  3rem;      /* 48 */
  --text-4xl:  3.75rem;   /* 60 */
  --text-5xl:  4.75rem;   /* 76 */

  /* Weights */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;

  /* Line heights */
  --leading-tight: 1.06;
  --leading-snug: 1.2;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  /* Letter spacing */
  --tracking-tight: -0.02em;
  --tracking-snug: -0.01em;
  --tracking-normal: 0em;
  --tracking-wide: 0.04em;
  --tracking-caps: 0.12em;   /* eyebrows / overlines */

  /* Spacing scale */
  --space-0: 0;
  --space-1: 0.25rem;   /* 4  */
  --space-2: 0.5rem;    /* 8  */
  --space-3: 0.75rem;   /* 12 */
  --space-4: 1rem;      /* 16 */
  --space-5: 1.5rem;    /* 24 */
  --space-6: 2rem;      /* 32 */
  --space-7: 3rem;      /* 48 */
  --space-8: 4rem;      /* 64 */
  --space-9: 6rem;      /* 96 */
  --space-10: 8rem;     /* 128 */

  /* Radii — soft, organic, never sharp */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 28px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  /* Shadows — soft, warm-tinted (olive-brown rather than pure black) */
  --shadow-xs: 0 1px 2px rgba(44, 40, 32, 0.06);
  --shadow-sm: 0 1px 3px rgba(44, 40, 32, 0.08), 0 1px 2px rgba(44, 40, 32, 0.04);
  --shadow-md: 0 4px 12px rgba(44, 40, 32, 0.08), 0 2px 4px rgba(44, 40, 32, 0.05);
  --shadow-lg: 0 12px 28px rgba(44, 40, 32, 0.12), 0 4px 8px rgba(44, 40, 32, 0.06);
  --shadow-xl: 0 24px 56px rgba(44, 40, 32, 0.16);

  /* Focus ring offset helper */
  --ring-width: 3px;

  /* Motion */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;

  /* Layout */
  --container-max: 1200px;
  --container-narrow: 760px;
}

/* --- Base normalization -------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
}

p { margin: 0; }

a { color: var(--text-link); text-decoration: none; }
a:hover { text-decoration: underline; }

button { font-family: inherit; }

/* Eyebrow / overline helper */
.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--brand-accent-hover);
}

::selection { background: var(--green-200); color: var(--green-900); }

:focus-visible {
  outline: var(--ring-width) solid var(--ring);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}