/* =====================================================================
   GEA Eivissa — Design Tokens
   Warm, earthy, hand-tended. No pure black, no pure white, no gradients.
   ===================================================================== */

/* ---------- Webfonts (Google Fonts) -------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400;1,6..72,500&family=Nunito:wght@400;500;600;700&family=Caveat:wght@500;600&display=swap');

:root {
  /* ---------- Color ------------------------------------------------ */
  /* Paper / surfaces */
  --paper:          #F4ECDF;   /* default page background — warm off-white */
  --clay:           #E9DCC5;   /* deeper wash — card backgrounds, sections */
  --lime-wash:      #FBF7EF;   /* lightest surface — inner cards, inputs   */

  /* Foreground / text */
  --earth:          #4A382A;   /* default text — warm dark brown           */
  --earth-soft:     #7B6754;   /* secondary text, captions                 */
  --earth-faint:    #A89880;   /* tertiary text, disabled                  */

  /* Brand */
  --terracotta:        #C26B4D;  /* primary accent — links, buttons        */
  --terracotta-deep:   #9C4F36;  /* hover/pressed state                    */
  --terracotta-wash:   #EBD3C7;  /* subtle terracotta tint                 */

  --olive:        #7C8559;   /* secondary accent — natura, tags            */
  --olive-deep:   #525A3A;   /* hover/pressed olive                        */
  --olive-wash:   #DCDFC8;   /* subtle olive tint                          */

  --wheat:        #D7B775;   /* highlight, underline accent                */
  --sea:          #5A7E84;   /* rare accent — dates, events                */

  /* ---------- Logo dot palette ----------------------------------- */
  /* Sampled from the GEA logo (circle-of-circles).
     Use sparingly for category tags, decorative bullets, and the dot
     scatter pattern — never as flat UI backgrounds at full opacity.   */
  --dot-orange:   #DD8A3D;   /* core orange */
  --dot-teal:     #2D8AA8;   /* turquoise   */
  --dot-pink:     #C99099;   /* dusty pink  */
  --dot-mauve:    #6E5A8E;   /* violet      */
  --dot-sage:     #94A77C;   /* sage green  */
  --dot-mustard:  #E0AE3F;   /* mustard     */
  --dot-rose:     #E4A199;   /* salmon rose */
  --dot-crimson:  #A52844;   /* deep red    */
  --dot-cream:    #ECE2C9;   /* pale cream  */

  /* Lines */
  --hairline:     #D8C8AC;   /* default border/divider — always warm       */
  --hairline-strong: #B8A582;

  /* Status (used sparingly) */
  --ok:           #6E8A4E;
  --warn:         #C8893D;
  --err:          #B0533F;

  /* ---------- Type ------------------------------------------------- */
  --font-serif:   'Newsreader', 'Source Serif Pro', Georgia, serif;
  --font-sans:    'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-hand:    'Caveat', 'Bradley Hand', cursive;

  /* Modular scale (16px base) */
  --fs-xs:    12px;
  --fs-sm:    14px;
  --fs-base:  16px;
  --fs-md:    18px;
  --fs-lg:    22px;
  --fs-xl:    28px;
  --fs-2xl:   36px;
  --fs-3xl:   48px;
  --fs-4xl:   64px;
  --fs-5xl:   88px;

  /* Line heights */
  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-normal:  1.5;
  --lh-loose:   1.65;

  /* ---------- Spacing --------------------------------------------- */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   24px;
  --space-6:   32px;
  --space-7:   48px;
  --space-8:   64px;
  --space-9:   96px;
  --space-10: 144px;

  /* Text measure */
  --measure-text:    640px;
  --measure-wide:    960px;
  --measure-full:   1200px;

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

  /* ---------- Shadow (barely-there) ------------------------------ */
  --shadow-sm:   0 1px 2px  rgba(74, 56, 42, 0.04);
  --shadow-md:   0 2px 8px  rgba(74, 56, 42, 0.06);
  --shadow-lg:   0 6px 24px rgba(74, 56, 42, 0.10);
  --shadow-focus: 0 0 0 2px var(--paper), 0 0 0 4px var(--olive);

  /* ---------- Motion --------------------------------------------- */
  --ease:           cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-fast:       120ms;
  --dur-base:       180ms;
  --dur-slow:       360ms;

  /* ---------- Layout chrome -------------------------------------- */
  --border:        1px solid var(--hairline);
  --border-strong: 1px solid var(--hairline-strong);
}

/* ====================================================================
   Semantic element styles
   ==================================================================== */

html, body {
  background: var(--paper);
  color: var(--earth);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Headings — Newsreader, tight, low-contrast warm brown */
h1, .h1 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--fs-4xl);
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
  color: var(--earth);
  text-wrap: balance;
  margin: 0 0 var(--space-5);
}
h2, .h2 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--fs-3xl);
  line-height: var(--lh-snug);
  letter-spacing: -0.005em;
  color: var(--earth);
  text-wrap: balance;
  margin: 0 0 var(--space-4);
}
h3, .h3 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  color: var(--earth);
  text-wrap: balance;
  margin: 0 0 var(--space-4);
}
h4, .h4 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  color: var(--earth);
  margin: 0 0 var(--space-3);
}
h5, .h5 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-md);
  line-height: var(--lh-snug);
  color: var(--earth);
  margin: 0 0 var(--space-2);
}

/* Body */
p, .body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-base);
  line-height: var(--lh-loose);
  color: var(--earth);
  text-wrap: pretty;
  margin: 0 0 var(--space-5);
}
.lead {
  font-family: var(--font-serif);
  font-weight: 400;
  font-style: italic;
  font-size: var(--fs-lg);
  line-height: 1.55;
  color: var(--earth-soft);
}
small, .caption {
  font-size: var(--fs-sm);
  color: var(--earth-soft);
  line-height: var(--lh-normal);
}
.eyebrow {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--olive-deep);
}
.hand {
  font-family: var(--font-hand);
  font-weight: 500;
  font-size: var(--fs-xl);
  color: var(--terracotta);
  line-height: 1;
}

/* Links */
a {
  color: var(--terracotta);
  text-decoration: underline;
  text-decoration-color: var(--wheat);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  transition: color var(--dur-base) var(--ease),
              text-decoration-color var(--dur-base) var(--ease);
}
a:hover {
  color: var(--terracotta-deep);
  text-decoration-color: currentColor;
}
a:focus-visible {
  outline: 2px solid var(--olive);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Quote / pull-quote */
blockquote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-lg);
  line-height: 1.5;
  color: var(--earth);
  border-left: 2px solid var(--terracotta);
  padding: var(--space-2) 0 var(--space-2) var(--space-5);
  margin: var(--space-6) 0;
}

/* Inline marks */
code {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 0.92em;
  background: var(--clay);
  color: var(--earth);
  padding: 0.1em 0.35em;
  border-radius: var(--radius-sm);
}
mark {
  background: linear-gradient(transparent 55%, var(--wheat) 55%);
  color: inherit;
  padding: 0 0.1em;
}

/* hr — a single hairline */
hr {
  border: 0;
  border-top: 1px solid var(--hairline);
  margin: var(--space-7) 0;
}

/* Focus default — never the browser blue */
:focus-visible {
  outline: 2px solid var(--olive);
  outline-offset: 3px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}