/* Design tokens for Las Mañanitas. Direction: Amanecer (dawn).
   Four inks plus ink: agave green, terracotta, marigold, cream. Marigold is decoration only (1.7:1 on cream). */

@font-face {
  font-family: "Caprasimo";
  src: url("/fonts/caprasimo-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("/fonts/hanken-grotesk-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("/fonts/hanken-grotesk-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("/fonts/hanken-grotesk-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* color */
  --c-cream: #F6EEDF;
  --c-paper: #FBF7EE;
  --c-sand: #EDE0C8;
  --c-clay: #EBD6BE;
  --c-ink: #2A1F18;
  --c-ink-2: #5B4B40;
  --c-agave: #1F4D3A;
  --c-agave-deep: #153629;
  --c-terra: #B24A28;
  --c-terra-dark: #8F3A1F;
  --c-gold: #F2A93B;
  --c-gold-deep: #D98F1F;
  --c-line: rgb(42 31 24 / 0.16);
  --c-line-soft: rgb(42 31 24 / 0.09);
  --c-ok: #1F6B45;
  --c-error: #A3281A;
  --focus: var(--c-agave);

  /* papel picado */
  --pp-1: var(--c-terra);
  --pp-2: var(--c-gold);
  --pp-3: var(--c-agave);
  --pp-4: var(--c-cream);
  --pp-hilo: rgb(246 238 223 / 0.55);

  /* type */
  --font-display: "Caprasimo", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-body: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --t-body: 1.0625rem;
  --t-small: 0.9375rem;
  --t-micro: 0.8125rem;
  --t-lead: clamp(1.1875rem, 0.6vw + 1.05rem, 1.4375rem);
  --t-section: clamp(2rem, 2.4vw + 1.2rem, 3.5rem);
  --t-hero: clamp(2.6rem, 5.6vw + 0.8rem, 5.25rem);

  /* shape: one scale. cards 16, controls 12, buttons and chips pill */
  --r-card: 16px;
  --r-control: 12px;
  --r-pill: 999px;

  /* space */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4.5rem;
  --s-9: 7rem;
  --header-h: 4rem;

  /* shadow tinted to the ground */
  --shadow-1: 0 1px 2px rgb(60 36 20 / 0.08), 0 6px 18px rgb(60 36 20 / 0.08);
  --shadow-2: 0 2px 4px rgb(60 36 20 / 0.08), 0 18px 44px rgb(60 36 20 / 0.16);

  /* motion */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --d-press: 140ms;
  --d-ui: 200ms;
  --d-reveal: 560ms;

  /* z scale */
  --z-header: 1030;
  --z-fab: 1020;
  --z-bar: 1025;

  /* Bootstrap bridge */
  --bs-body-font-family: var(--font-body);
  --bs-body-font-size: var(--t-body);
  --bs-body-color: var(--c-ink);
  --bs-body-bg: var(--c-cream);
  --bs-link-color: var(--c-terra);
  --bs-link-hover-color: var(--c-terra-dark);
  --bs-border-color: var(--c-line);
  --bs-primary: var(--c-terra);
  --bs-primary-rgb: 178, 74, 40;
  --bs-focus-ring-color: rgb(31 77 58 / 0.35);
}