/* =====================================================================
   VISTA11 — Colors & Type Foundations
   Elevated Living With A View — Hamburg, Mundsburg Tower
   ---------------------------------------------------------------------
   Brand mood: Art Déco · Bauhaus · Scandi · Boho.
   Warm wood tones · soft cream nuances · accents in rich velvet green.
   ===================================================================== */

/* --- Webfonts: Cormorant Garamond (display) + Jost (body/UI) --------- */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Jost:wght@300;400;500;600&display=swap');

:root {
  /* ------------------------------------------------------------------
     BASE PALETTE
     ------------------------------------------------------------------ */

  /* Velvet green — the signature accent ("sattes Samtgrün") */
  --green-900: #1C2A21;
  --green-800: #243528;
  --green-700: #2E4434;   /* PRIMARY velvet green */
  --green-600: #3A5542;
  --green-500: #4C6B54;
  --green-300: #84997F;
  --green-100: #D7DDCF;

  /* Warm wood — walnut → oak → light tan */
  --wood-800: #5E3F28;
  --wood-700: #7A5536;    /* walnut */
  --wood-600: #946540;
  --wood-500: #B07F4F;    /* warm wood */
  --wood-400: #C49A6C;
  --wood-300: #D6B68C;    /* light oak */
  --wood-200: #E6D2B4;

  /* Cream — soft paper nuances */
  --cream-50:  #FCF9F3;
  --cream-100: #F6F0E4;   /* page background */
  --cream-200: #EFE6D5;
  --cream-300: #E5D8C2;
  --cream-400: #D8C7AB;

  /* Ink — warm neutral greys for text */
  --ink-900: #292420;
  --ink-700: #463F37;
  --ink-500: #6B6256;
  --ink-400: #8C8375;
  --ink-300: #B2A998;
  --ink-200: #D2C9B9;

  --white: #FFFFFF;

  /* ------------------------------------------------------------------
     SEMANTIC COLOR ROLES
     ------------------------------------------------------------------ */
  --bg:            var(--cream-100);   /* default page canvas */
  --bg-alt:        var(--cream-50);
  --bg-contrast:   var(--green-800);   /* dark sections */
  --surface:       var(--white);       /* cards */
  --surface-warm:  var(--cream-50);

  --fg1:           var(--ink-900);     /* primary text */
  --fg2:           var(--ink-500);     /* secondary text */
  --fg3:           var(--ink-400);     /* muted / captions */
  --fg-on-dark:    var(--cream-50);    /* text on green/wood */
  --fg-on-dark-2:  var(--green-100);

  --accent:        var(--green-700);   /* primary brand accent */
  --accent-hover:  var(--green-600);
  --accent-press:  var(--green-800);
  --accent-wood:   var(--wood-500);    /* secondary warm accent */
  --accent-wood-2: var(--wood-700);

  --line:          rgba(41,36,32,0.12);   /* hairline borders */
  --line-strong:   rgba(41,36,32,0.22);
  --line-on-dark:  rgba(252,249,243,0.18);

  --focus-ring:    rgba(46,68,52,0.45);

  /* ------------------------------------------------------------------
     TYPE — families & scale
     ------------------------------------------------------------------ */
  --font-display: 'Cormorant Garamond', 'Cormorant', Georgia, serif;
  --font-sans:    'Jost', 'Futura', 'Century Gothic', system-ui, sans-serif;

  /* Modular scale (1.25 major third), rem-based */
  --text-xs:   0.75rem;   /* 12px — eyebrow / fine print */
  --text-sm:   0.875rem;  /* 14px */
  --text-base: 1rem;      /* 16px — body */
  --text-md:   1.125rem;  /* 18px — lead */
  --text-lg:   1.5rem;    /* 24px */
  --text-xl:   2rem;      /* 32px */
  --text-2xl:  2.75rem;   /* 44px */
  --text-3xl:  3.75rem;   /* 60px */
  --text-4xl:  5rem;      /* 80px — hero */

  --leading-tight: 1.08;
  --leading-snug:  1.25;
  --leading-body:  1.6;

  /* Letterspacing — Bauhaus geometry likes generous tracking on caps */
  --track-eyebrow: 0.26em;
  --track-caps:    0.14em;
  --track-tight:   -0.01em;

  --weight-light:  300;
  --weight-reg:    400;
  --weight-med:    500;
  --weight-semi:   600;

  /* ------------------------------------------------------------------
     SPACING / RADII / SHADOWS / MOTION  (see also tokens cards)
     ------------------------------------------------------------------ */
  --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: 128px;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(41,36,32,0.06), 0 1px 3px rgba(41,36,32,0.05);
  --shadow-md: 0 6px 18px rgba(41,36,32,0.08), 0 2px 6px rgba(41,36,32,0.05);
  --shadow-lg: 0 24px 60px rgba(28,42,33,0.16), 0 8px 20px rgba(41,36,32,0.08);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 160ms;
  --dur: 280ms;
  --dur-slow: 520ms;
}

/* =====================================================================
   SEMANTIC TYPE ROLES
   Apply these classes (or copy the declarations) for consistent type.
   ===================================================================== */

.t-eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--weight-med);
  font-size: var(--text-xs);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--accent-wood);
}

.t-display {            /* hero */
  font-family: var(--font-display);
  font-weight: var(--weight-reg);
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--track-tight);
  color: var(--fg1);
}

.t-h1 {
  font-family: var(--font-display);
  font-weight: var(--weight-reg);
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
  color: var(--fg1);
}

.t-h2 {
  font-family: var(--font-display);
  font-weight: var(--weight-reg);
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  color: var(--fg1);
}

.t-h3 {
  font-family: var(--font-sans);
  font-weight: var(--weight-med);
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  letter-spacing: var(--track-tight);
  color: var(--fg1);
}

.t-lead {
  font-family: var(--font-sans);
  font-weight: var(--weight-light);
  font-size: var(--text-md);
  line-height: var(--leading-body);
  color: var(--fg2);
}

.t-body {
  font-family: var(--font-sans);
  font-weight: var(--weight-reg);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--fg2);
}

.t-caption {
  font-family: var(--font-sans);
  font-weight: var(--weight-reg);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  color: var(--fg3);
}

.t-label {              /* buttons & UI labels — tracked caps */
  font-family: var(--font-sans);
  font-weight: var(--weight-med);
  font-size: var(--text-sm);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--fg1);
}