/* Design tokens - Hotel U Hradních
 * Vintage grand-hotel stationery: warm cream paper, deep bottle-green anchor,
 * burnt terracotta accent, fine muted brass, warm ink. Cream = paper, not screen.
 */
:root {
  /* --- Core palette ------------------------------------------------------- */
  --paper:        #F5EFE6; /* dominant warm parchment (~60%) */
  --paper-lift:   #FBF6EC; /* a lifted sheet: cards, ticket, dialog */
  --paper-deep:   #ECE3D3; /* alternating section tone */
  --paper-edge:   #E1D6C1; /* hairline / border on cream */

  --green:        #16281F; /* deep bottle-green anchor (confirm banner, summary bar) */
  --green-lift:   #1F3A2C; /* raised green surface */
  --green-line:   #33503F; /* hairline on green */

  --terracotta:      #B8583A; /* burnt accent, primary CTA, rules */
  --terracotta-deep: #98422A; /* CTA pressed */
  --terracotta-wash: #EBD8CB; /* faint terracotta tint on cream */

  --brass:      #B8863B; /* muted metallic - fine details only */
  --brass-soft: #CBA25A; /* lighter brass, foil-look text */

  --ink:        #2B2620; /* warm near-black (never pure black) */
  --ink-muted:  #6E6355; /* muted body text on cream */


  /* On deep-green surfaces */
  --on-green:        #EFE6D3;
  --on-green-muted:  rgba(239, 230, 211, 0.74);
  --on-green-faint:  rgba(239, 230, 211, 0.45);

  --color-white:   #ffffff;
  --color-success: #3F6B48;
  --color-error:   #A83621;

  /* --- Semantic aliases (kept in sync with JS inline-style var() refs) ----- */
  --color-bg:            var(--paper);
  --color-surface:       var(--paper-lift);
  --color-surface-warm:  var(--paper-deep);
  --color-text:          var(--ink);
  --color-muted:         var(--ink-muted);
  --color-accent:        var(--terracotta);
  --color-accent-hover:  var(--terracotta-deep);
  --color-cta:           var(--terracotta);
  --color-cta-hover:     var(--terracotta-deep);
  --color-cta-text:      #FBF6EC;
  --color-star:          var(--brass);
  --color-border:        var(--paper-edge);
  --color-border-strong: var(--terracotta);

  /* --- Typography --------------------------------------------------------- */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body:    'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-script:  'Caveat', 'Segoe Script', cursive;
  --font-primary: var(--font-body); /* legacy alias */

  /* Type scale - body bumped for senior legibility (>=17px body copy) */
  --text-display:  clamp(2.9rem, 7vw, 5rem);
  --text-h1:       clamp(2.3rem, 5vw, 3.4rem);
  --text-h2:       clamp(1.9rem, 3.6vw, 2.7rem);
  --text-h3:       clamp(1.5rem, 2.4vw, 1.95rem);
  --text-h4:       clamp(1.25rem, 1.7vw, 1.5rem);
  --text-lead:     clamp(1.18rem, 1.5vw, 1.4rem);
  --text-body:     1.125rem;   /* 18px */
  --text-small:    1.0625rem;  /* 17px - still real reading copy */
  --text-xs:       0.8125rem;  /* 13px - decorative labels only */

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  --leading-tight:  1.12;
  --leading-snug:   1.28;
  --leading-normal: 1.6;
  --leading-loose:  1.78;

  --tracking-tight: -0.015em;
  --tracking-caps:  0.2em;   /* small-caps registration labels */
  --tracking-wide:  0.12em;

  /* --- Spacing (8px grid) ------------------------------------------------- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* --- Layout ------------------------------------------------------------- */
  --container-max:     1120px;
  --container-narrow:  760px;
  --container-padding: clamp(1.25rem, 5vw, 3rem);
  --section-padding-y: clamp(3.25rem, 7vw, 6rem);
  --grid-gap:          clamp(1rem, 2.4vw, 2rem);

  /* --- Radii (varied, printed feel - mostly crisp, never big pills) ------- */
  --radius-sm:   3px;
  --radius-md:   6px;
  --radius-lg:   10px;
  --radius-xl:   14px;
  --radius-full: 9999px;

  /* --- Shadows (warm, restrained) ---------------------------------------- */
  --shadow-sm:  0 1px 2px rgba(43, 38, 32, 0.08);
  --shadow-md:  0 8px 22px rgba(43, 38, 32, 0.12);
  --shadow-lg:  0 20px 50px rgba(22, 40, 31, 0.24);
  --shadow-snap: 0 10px 24px rgba(43, 38, 32, 0.20);
  --shadow-cta: 0 6px 16px rgba(152, 66, 42, 0.28);

  /* --- Texture / detail --------------------------------------------------- */
  --rule-brass: rgba(184, 134, 59, 0.55);
  --hairline:   1px;

  /* --- The letter sheet (v2: the whole page is one sheet of paper) -------- */
  --desk:        #DED3C0; /* the table the sheet lies on */
  --sheet-max:   1140px;
  --fold-len:    34vh;    /* one folded panel of the letter; the crease motif
                             repeats at this rhythm down the WHOLE sheet */

  /* --- Envelope intro ------------------------------------------------------ */
  --env-w:      min(86vw, 400px);
  --env-h:      calc(var(--env-w) * 0.7);

  /* Touch target (senior-friendly, >=52px) */
  --tap-min: 56px;

  /* --- Motion ------------------------------------------------------------- */
  --duration-fast: 130ms;
  --duration-base: 220ms;
  --duration-slow: 420ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --transition-base: all var(--duration-base) var(--ease-out);
}