/* =========================================================================
   ALMOREJO — colors & type
   Light Synthwave · Jony Ive · Minimalismo · Pure-nature · High contrast
   ========================================================================= */

@import url("https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;1,6..72,400&family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500&display=swap");

:root {
  /* -----------------------------------------------------------------------
     COLOR — Neutrals (the base)
     Warm paper surfaces, cool deep ink. High contrast intentionally.
     ----------------------------------------------------------------------- */
  --paper-0:   #FFFFFF;          /* pure white — used rarely, only for "lifted" surfaces */
  --paper-50:  #FAF7F1;          /* primary background — warm paper */
  --paper-100: #F2EDE3;          /* tinted surface */
  --paper-200: #E7E0D2;          /* subtle divider on paper */

  --ink-900:   #06080A;          /* near-black w/ cool tilt — primary type */
  --ink-700:   #22262A;          /* strong body */
  --ink-500:   #5C6168;          /* body / secondary */
  --ink-300:   #989398;          /* muted / placeholder */
  --ink-100:   #D9D5CD;          /* hairline on paper */

  /* -----------------------------------------------------------------------
     COLOR — Nature accents
     Borrowed from the grass the brand is named after.
     ----------------------------------------------------------------------- */
  --sage-100: #E4EADF;
  --sage-300: #B5C5AE;
  --sage-500: #6F8A6E;           /* primary brand — Almorejo sage */
  --sage-700: #3D5640;           /* deep moss */
  --sage-900: #1B2A1E;

  --clay-100: #F5E6D8;
  --clay-300: #E2B998;
  --clay-500: #C58963;           /* warm clay */
  --clay-700: #8B5A3C;

  --stone-300: #D2CDC2;
  --stone-500: #B5B0A5;          /* quiet stone */
  --stone-700: #756F62;

  /* -----------------------------------------------------------------------
     COLOR — Light Synthwave whisper
     Used SPARINGLY. One pop, never together. Never gradients across both.
     ----------------------------------------------------------------------- */
  --dawn-300:  #FBD4BD;
  --dawn-500:  #F4A582;          /* peach — the single warm pop */
  --dawn-700:  #C77451;

  --dusk-300:  #DCCFE8;
  --dusk-500:  #B69ECC;          /* muted lavender — tiny doses only */
  --dusk-700:  #7A6492;

  /* -----------------------------------------------------------------------
     COLOR — Semantic
     ----------------------------------------------------------------------- */
  --fg-1: var(--ink-900);
  --fg-2: var(--ink-700);
  --fg-3: var(--ink-500);
  --fg-4: var(--ink-300);
  --fg-inv: var(--paper-50);

  --bg-1: var(--paper-50);
  --bg-2: var(--paper-100);
  --bg-3: var(--paper-200);
  --bg-inv: var(--ink-900);

  --line: var(--ink-100);
  --line-strong: var(--ink-300);

  --brand: var(--sage-700);
  --brand-deep: var(--sage-900);
  --brand-soft: var(--sage-100);
  --accent: var(--dawn-500);     /* the synthwave whisper */
  --accent-soft: var(--dawn-300);

  --success: var(--sage-700);
  --warning: var(--clay-500);
  --danger:  #B7402F;            /* terracotta — natural, not "alert red" */
  --info:    var(--dusk-700);

  /* -----------------------------------------------------------------------
     TYPE — Stacks
     Display: Newsreader (Jony Ive precision)
     Body:    Geist (clean grotesk — explicitly not Inter)
     Mono:    Geist Mono
     ----------------------------------------------------------------------- */
  --font-display: "Newsreader", "Times New Roman", Georgia, serif;
  --font-sans:    "Geist", -apple-system, "SF Pro Text", system-ui, sans-serif;
  --font-mono:    "Geist Mono", "SF Mono", ui-monospace, Menlo, monospace;

  /* Modular scale — 1.250 (major third). Generous, not chunky. */
  --t-eyebrow:  0.6875rem;   /* 11px — UPPERCASE labels */
  --t-micro:    0.75rem;     /* 12px */
  --t-small:    0.8125rem;   /* 13px */
  --t-body:     0.9375rem;   /* 15px — default reading size */
  --t-lede:     1.125rem;    /* 18px */
  --t-h4:       1.375rem;    /* 22px */
  --t-h3:       1.75rem;     /* 28px */
  --t-h2:       2.5rem;      /* 40px */
  --t-h1:       3.75rem;     /* 60px */
  --t-display:  5.75rem;     /* 92px — Newsreader hero */
  --t-mega:     8.5rem;      /* 136px — homepage hero only */

  /* Tight, considered tracking. Display goes a touch negative. */
  --track-mega:    -0.045em;
  --track-display: -0.035em;
  --track-h1:      -0.025em;
  --track-h2:      -0.02em;
  --track-h3:      -0.015em;
  --track-body:    -0.005em;
  --track-eyebrow:  0.12em;

  /* Line heights — display tight, body comfortable. */
  --lh-display: 0.98;
  --lh-heading: 1.08;
  --lh-body:    1.55;
  --lh-tight:   1.25;

  /* -----------------------------------------------------------------------
     SPACING — 4px base
     ----------------------------------------------------------------------- */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;
  --s-10: 128px;
  --s-11: 192px;

  /* -----------------------------------------------------------------------
     RADII — Restrained. Ive doesn't do big chubby rounding.
     ----------------------------------------------------------------------- */
  --r-1: 2px;
  --r-2: 4px;
  --r-3: 8px;     /* default for cards / inputs */
  --r-4: 12px;
  --r-5: 999px;   /* pill */

  /* -----------------------------------------------------------------------
     ELEVATION — Very low. Most surfaces use hairlines, not shadows.
     ----------------------------------------------------------------------- */
  --shadow-0: none;
  --shadow-1: 0 1px 0 rgba(10,12,14,0.04), 0 1px 2px rgba(10,12,14,0.04);
  --shadow-2: 0 1px 2px rgba(10,12,14,0.05), 0 4px 12px rgba(10,12,14,0.06);
  --shadow-3: 0 2px 4px rgba(10,12,14,0.06), 0 12px 32px rgba(10,12,14,0.08);
  --shadow-focus: 0 0 0 3px rgba(111,138,110,0.28);

  /* -----------------------------------------------------------------------
     MOTION — Ive timing. Quick, but eased. No bounce.
     ----------------------------------------------------------------------- */
  --ease-out:  cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in:   cubic-bezier(0.55, 0.06, 0.68, 0.19);
  --ease-soft: cubic-bezier(0.4, 0.0, 0.2, 1);
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;
  --dur-4: 520ms;
}

/* =========================================================================
   SEMANTIC TYPE — Use these classes; don't restyle headings ad-hoc.
   ========================================================================= */
html, body {
  background: var(--bg-1);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.t-mega {
  font-family: var(--font-display);
  font-size: var(--t-mega);
  line-height: var(--lh-display);
  letter-spacing: var(--track-mega);
  font-weight: 400;
}
.t-display, h1.display {
  font-family: var(--font-display);
  font-size: var(--t-display);
  line-height: var(--lh-display);
  letter-spacing: var(--track-display);
  font-weight: 400;
}
.t-h1, h1 {
  font-family: var(--font-display);
  font-size: var(--t-h1);
  line-height: var(--lh-heading);
  letter-spacing: var(--track-h1);
  font-weight: 400;
}
.t-h2, h2 {
  font-family: var(--font-display);
  font-size: var(--t-h2);
  line-height: var(--lh-heading);
  letter-spacing: var(--track-h2);
  font-weight: 400;
}
.t-h3, h3 {
  font-family: var(--font-sans);
  font-size: var(--t-h3);
  line-height: var(--lh-heading);
  letter-spacing: var(--track-h3);
  font-weight: 500;
}
.t-h4, h4 {
  font-family: var(--font-sans);
  font-size: var(--t-h4);
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
  font-weight: 500;
}
.t-lede {
  font-family: var(--font-sans);
  font-size: var(--t-lede);
  line-height: 1.45;
  font-weight: 400;
  color: var(--fg-2);
}
.t-body, p {
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  letter-spacing: var(--track-body);
}
.t-small {
  font-size: var(--t-small);
  line-height: 1.45;
  color: var(--fg-3);
}
.t-micro {
  font-size: var(--t-micro);
  line-height: 1.4;
  color: var(--fg-3);
}
.t-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--t-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--track-eyebrow);
  font-weight: 500;
  color: var(--fg-3);
}
.t-mono, code, kbd, samp {
  font-family: var(--font-mono);
  font-size: 0.875em;
  letter-spacing: 0;
  font-feature-settings: "tnum", "zero";
}
.t-num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* italic display is a brand move — used on key nouns ("super-sonic", "builders") */
.t-emph {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
}