/* ============================================================
   Cigardome — Design tokens
   Source of truth: Figma "Cigardome site"
   ============================================================ */

@font-face {
  font-family: 'Involve';
  src: url('../fonts/Involve-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Involve';
  src: url('../fonts/Involve-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Involve';
  src: url('../fonts/Involve-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'ZT Neue Ralewe';
  src: url('../fonts/ZTNeueRalewe-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'ZT Neue Ralewe';
  src: url('../fonts/ZTNeueRalewe-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'ZT Neue Ralewe';
  src: url('../fonts/ZTNeueRalewe-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'ZT Neue Ralewe';
  src: url('../fonts/ZTNeueRalewe-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'ZT Neue Ralewe';
  src: url('../fonts/ZTNeueRalewe-ExtraBold.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ── Color ─────────────────────────────────────────────── */
  --color-brown:        rgb(64, 55, 49);     /* #403731 — primary text */
  --color-brown-rgb:    64, 55, 49;
  --color-orange:       rgb(166, 87, 56);    /* #A65738 — accent */
  --color-orange-rgb:   166, 87, 56;
  --color-beige:        rgb(246, 241, 234);  /* #F6F1EA — surface */
  --color-beige-rgb:    246, 241, 234;
  --color-white:        rgb(255, 255, 255);
  --color-white-rgb:    255, 255, 255;
  --color-dark-brown:   rgb(69, 68, 68);     /* #454444 */
  --color-rose:         rgb(211, 171, 155);  /* #D3AB9B */
  --color-warm-brown:   rgb(121, 79, 63);    /* #794F3F */

  /* Tints */
  --color-brown-05:     rgba(64, 55, 49, 0.05);
  --color-brown-10:     rgba(64, 55, 49, 0.10);
  --color-brown-25:     rgba(64, 55, 49, 0.25);
  --color-brown-50:     rgba(64, 55, 49, 0.50);
  --color-orange-20:    rgba(166, 87, 56, 0.20);
  --color-beige-50:     rgba(246, 241, 234, 0.50);

  /* ── Typography ────────────────────────────────────────── */
  --font-display:       'ZT Neue Ralewe', Georgia, serif;
  --font-body:          'Involve', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;

  /* Display sizes (ZT Neue Ralewe ExtraBold/Bold) */
  --fs-display-xl:      140px;  /* hero title web */
  --fs-display-lg:      100px;  /* section title web */
  --fs-display-md:      80px;   /* No download needed */
  --fs-display-sm:      48px;   /* hero title mob */

  /* Title sizes (Involve Medium) */
  --fs-title-xl:        70px;   /* "Meet, Explore..." */
  --fs-title-lg:        45px;   /* card titles */
  --fs-title-md:        35px;   /* tab */
  --fs-title-sm:        20px;   /* article title */

  /* Body */
  --fs-body-lg:         20px;
  --fs-body-md:         16px;
  --fs-body-sm:         14px;
  --fs-body-xs:         13px;
  --fs-caption:         12px;
  --fs-tiny:            10px;

  --lh-tight:           0.9;
  --lh-snug:            1.05;
  --lh-base:            1.5;
  --lh-relaxed:         1.55;

  --fw-regular:         400;
  --fw-medium:          500;
  --fw-semibold:        600;
  --fw-bold:            700;
  --fw-extra:           800;

  /* ── Radii ─────────────────────────────────────────────── */
  --radius-sm:          6px;
  --radius-md:          10px;
  --radius-lg:          20px;
  --radius-pill:        100px;

  /* ── Spacing scale (matches Figma) ─────────────────────── */
  --sp-1:               4px;
  --sp-2:               8px;
  --sp-3:               10px;
  --sp-4:               12px;
  --sp-5:               15px;
  --sp-6:               20px;
  --sp-7:               25px;
  --sp-8:               30px;
  --sp-9:               40px;
  --sp-10:              50px;
  --sp-11:              60px;
  --sp-12:              80px;
  --sp-13:              120px;
  --sp-14:              160px;

  /* ── Shadows ──────────────────────────────────────────── */
  --shadow-soft:        0 10px 30px rgba(64, 55, 49, 0.10);
  --shadow-phone:       0 30px 60px rgba(64, 55, 49, 0.25);

  /* ── Layout ───────────────────────────────────────────── */
  --container-web:      1440px;
  --container-content:  1400px;
  --container-tab:      768px;
  --container-mob:      320px;

  --header-h-web:       120px;
  --header-h-tab:       80px;
  --header-h-mob:       72px;
}