/* ============================================================
   CORSO ZNOJMO — Foundations: Color & Type
   "Vídeňská kavárna se znojemskou duší od roku 1824."
   Heritage Viennese café warmth + Italian pizzeria hospitality.
   ============================================================ */

/* --- Webfonts: self-hosted (GDPR-friendly, bez volání na fonts.gstatic.com) --- */
@import url('fonts/fonts.css');

:root {
  /* ---------------------------------------------------------
     COLOR — raw palette
     A warm, candle-lit heritage palette: espresso & cream,
     a brass/gold heritage accent, terracotta "pizza" red,
     and a quiet olive for tertiary moments.
     --------------------------------------------------------- */

  /* Espresso / ink (warm near-blacks & browns) */
  --espresso-950: #1C140F;   /* deepest — hero overlays, footer */
  --espresso-900: #241A14;
  --espresso-800: #2B1E16;   /* primary dark surface */
  --espresso-700: #3A2A1F;
  --espresso-600: #4E3A2C;
  --espresso-500: #6E5544;

  /* Cream / paper (warm ivories) */
  --cream-50:  #FCF8F0;      /* lightest card */
  --cream-100: #FBF6EC;      /* card surface */
  --cream-200: #F5EDE0;      /* page background */
  --cream-300: #ECE0CC;      /* sunken / dividers */
  --cream-400: #DECBAE;      /* borders on cream */

  /* Brass / gold (heritage accent) */
  --brass-300: #D8B978;
  --brass-400: #C7A158;
  --brass-500: #B68A43;      /* primary accent */
  --brass-600: #997135;
  --brass-700: #7A5A2B;

  /* Terracotta / tomato (the "pizza" accent — use sparingly) */
  --tomato-400: #C24A37;
  --tomato-500: #A93423;     /* secondary accent */
  --tomato-600: #8C2A1C;

  /* Olive (quiet tertiary — sage of the café plants) */
  --olive-400: #7C7A52;
  --olive-500: #5E5B3E;

  /* Neutral warm greys (text on cream) */
  --warm-700: #4A3D33;
  --warm-600: #6E5D4F;
  --warm-500: #8C7B6C;

  /* ---------------------------------------------------------
     SEMANTIC — foreground / background / lines
     --------------------------------------------------------- */
  --bg:            var(--cream-200);   /* default page */
  --bg-card:       var(--cream-100);
  --bg-sunken:     var(--cream-300);
  --bg-dark:       var(--espresso-800);/* inverted sections */
  --bg-darkest:    var(--espresso-950);

  --fg1:           var(--espresso-900);/* primary text on cream */
  --fg2:           var(--warm-600);    /* secondary / muted */
  --fg3:           var(--warm-500);    /* tertiary / captions */
  --fg-on-dark:    var(--cream-100);   /* text on espresso */
  --fg-on-dark-2:  #C9B69E;            /* muted on dark */

  --accent:        var(--brass-500);   /* brass — primary accent */
  --accent-hover:  var(--brass-600);
  --accent-2:      var(--tomato-500);  /* terracotta — sparing */
  --accent-2-hover:var(--tomato-600);

  --line:          var(--cream-400);   /* hairlines on cream */
  --line-dark:     rgba(214,193,160,0.18); /* hairlines on dark */

  /* ---------------------------------------------------------
     TYPE — families
     --------------------------------------------------------- */
  --font-display: 'Cormorant Garamond', 'Hoefler Text', Georgia, serif;
  --font-body:    'Mulish', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-label:   'Mulish', system-ui, sans-serif; /* used uppercase + tracked */

  /* Type scale (fluid-ish, rem based on 16px root) */
  --t-display:  clamp(3.2rem, 6vw, 5.5rem);  /* hero */
  --t-h1:       clamp(2.4rem, 4vw, 3.5rem);
  --t-h2:       clamp(1.9rem, 3vw, 2.6rem);
  --t-h3:       1.5rem;
  --t-h4:       1.2rem;
  --t-body-lg:  1.175rem;
  --t-body:     1rem;
  --t-small:    0.875rem;
  --t-eyebrow:  0.8125rem;

  /* Tracking */
  --track-eyebrow: 0.22em;
  --track-tight:  -0.01em;

  /* ---------------------------------------------------------
     SPACING / RADIUS / SHADOW / MOTION
     --------------------------------------------------------- */
  --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: 14px;
  --radius-xl: 22px;
  --radius-pill: 999px;

  /* Shadows — soft, warm, never blue-grey */
  --shadow-sm: 0 1px 2px rgba(43,30,22,0.08);
  --shadow-md: 0 6px 20px rgba(43,30,22,0.10);
  --shadow-lg: 0 18px 48px rgba(43,30,22,0.16);
  --shadow-inset-line: inset 0 0 0 1px var(--line);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 280ms;
}

/* ============================================================
   SEMANTIC ELEMENT STYLES
   Apply via classes (.eyebrow, .h1, etc.) or as a base layer.
   ============================================================ */

.cs-display {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-display);
  line-height: 0.98;
  letter-spacing: var(--track-tight);
  color: var(--fg1);
}

.cs-h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-h1);
  line-height: 1.04;
  letter-spacing: var(--track-tight);
  color: var(--fg1);
}

.cs-h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-h2);
  line-height: 1.08;
  color: var(--fg1);
}

.cs-h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-h3);
  line-height: 1.2;
  color: var(--fg1);
}

.cs-h4 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--t-h4);
  line-height: 1.3;
  color: var(--fg1);
}

/* Small uppercase tracked label — the brand's signature device */
.cs-eyebrow {
  font-family: var(--font-label);
  font-weight: 700;
  font-size: var(--t-eyebrow);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
}

.cs-body-lg {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--t-body-lg);
  line-height: 1.65;
  color: var(--fg2);
}

.cs-body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--t-body);
  line-height: 1.6;
  color: var(--fg2);
}

.cs-small {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--t-small);
  line-height: 1.5;
  color: var(--fg3);
}

/* Decorative italic serif — used for quotes / accents like "od 1824" */
.cs-serif-italic {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
}