/* =========================================================
   LùBar — Design tokens
   Mobile-first @ 390 × 844 (iPhone 14 Pro). Tablet/desktop
   not designed yet — viewport caps at 540px and centers.
   ========================================================= */

:root {
  /* Paper / ink */
  --paper:        #ece7dd;
  --paper-elev:   #f3efe6;
  --paper-warm:   #f5f1e8;  /* ristorante / prenota base */
  --paper-cool:   #f1ebe1;  /* officine base */
  --paper-cream:  #ece4d6;  /* officine alt */
  --ink:          #1c1f1a;
  --ink-2:        #2a2d27;
  --ink-soft:     rgba(28, 31, 26, 0.7);
  --ink-faint:    rgba(28, 31, 26, 0.45);

  /* Brand accents */
  --moss:           #2f3a2c;
  --moss-2:         #3d4a39;
  --terracotta:     #b8553b;
  --terracotta-soft:#d97b5e;
  --blush:          #e9c8b8;
  --blush-2:        #e8c1ad;
  --gold:           #c89a4a;

  /* Officine accents */
  --off-rose:   #d6a89a;
  --off-brick:  #b87a68;
  --off-cream:  #e8d8c4;

  /* Hairlines */
  --hairline:        rgba(28, 31, 26, 0.15);
  --hairline-soft:   rgba(28, 31, 26, 0.08);
  --hairline-strong: rgba(255, 255, 255, 0.35);

  /* Type families */
  --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Helvetica Neue', sans-serif;

  /* Type scale (mobile, 390 px viewport) */
  --fs-display:    56px;   /* hero italic headline */
  --fs-h1:         50px;   /* page hero */
  --fs-h2:         38px;   /* section title */
  --fs-h3:         28px;   /* card title */
  --fs-card:       24px;
  --fs-body-lg:    18px;
  --fs-body:       15px;
  --fs-small:      13px;
  --fs-eyebrow:    11px;
  --fs-caption:    11px;
  --fs-button:     10px;
  --fs-tiny:       9px;
  --fs-micro:      8px;

  /* Tracking */
  --ls-display:    -0.02em;
  --ls-headline:   -0.015em;
  --ls-body:        normal;
  --ls-eyebrow:    0.32em;
  --ls-button:     0.22em;
  --ls-caption:    0.05em;

  /* Line heights */
  --lh-display:  1.05;
  --lh-headline: 1.10;
  --lh-body:     1.55;

  /* Spacing — 4-pt base */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  22px;   /* page gutter (header) */
  --sp-6:  28px;   /* page gutter (body) */
  --sp-7:  36px;
  --sp-8:  48px;
  --sp-9:  64px;
  --sp-10: 96px;

  --gutter-edge: var(--sp-5);   /* 22 — header / hero */
  --gutter-body: var(--sp-6);   /* 28 — body sections */
  --section-y:   var(--sp-9);   /* 64 — vertical section padding */
  --safe-top:    54px;          /* status bar safe area */

  /* Radii — square almost everywhere; only buttons / modals depart */
  --r-0:    0;
  --r-md:   12px;   /* buttons */
  --r-lg:   16px;
  --r-xl:   24px;   /* modal top corners */

  /* Motion */
  --t-fast:  200ms;
  --t-med:   320ms;
  --t-slow:  600ms;
  --t-glide: 1100ms;
  --t-ken:   6000ms;
  --ease:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out:cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.4, 0, 0.2, 1);

  /* Layout */
  --device-width: 390px;
  --device-max:   540px;
}