/* ============================================================
   UI Protocol · Shared design tokens
   Every component links this file: <link rel="stylesheet" href="../assets/tokens.css">
   Edit here once and the change propagates globally.
============================================================ */

/* ── Fonts ───────────────────────── */
@font-face {
  font-family: "Instrument Sans";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("./fonts/instrumentsans_n4.db86542ae5e1596dbdb28c279ae6c2086c4c5bfa.woff2") format("woff2"),
       url("./fonts/instrumentsans_n4.510f1b081e58d08c30978f465518799851ef6d8b.woff") format("woff");
}
@font-face {
  font-family: "Instrument Sans";
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url("./fonts/instrumentsans_n5.1ce463e1cc056566f977610764d93d4704464858.woff2") format("woff2"),
       url("./fonts/instrumentsans_n5.9079eb7bba230c9d8d8d3a7d101aa9d9f40b6d14.woff") format("woff");
}
@font-face {
  font-family: "Instrument Sans";
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  src: url("./fonts/instrumentsans_i4.028d3c3cd8d085648c808ceb20cd2fd1eb3560e5.woff2") format("woff2"),
       url("./fonts/instrumentsans_i4.7e90d82df8dee29a99237cd19cc529d2206706a2.woff") format("woff");
}
@font-face {
  font-family: "Instrument Sans";
  font-weight: 500;
  font-style: italic;
  font-display: swap;
  src: url("./fonts/instrumentsans_i5.d2033775d4997e4dcd0d47ebdd5234b5c14e3f53.woff2") format("woff2"),
       url("./fonts/instrumentsans_i5.8e3cfa86b65acf809ce72bc4f9b58f185ef6b8c7.woff") format("woff");
}
@font-face {
  font-family: "Barlow";
  font-weight: 800;
  font-style: normal;
  font-display: swap;
  src: url("./fonts/barlow_n8.b626aaae1ccd3d041eadc7b1698cddd6c6e1a1be.woff2") format("woff2"),
       url("./fonts/barlow_n8.1bf215001985940b35ef11f18a7d3d9997210d4c.woff") format("woff");
}

/* ── Design tokens ───────────────────── */
:root {
  /* —— Colors —— */
  --c-text:       #090909;   /* main text / logo */
  --c-text-soft:  #6e6e6e;   /* secondary text / hints */
  --c-text-mute:  #a0a0a0;   /* muted text / placeholder */
  --c-bg:         #ffffff;   /* main background */
  --c-bg-soft:    #f7f7f7;   /* card / input bg */
  --c-bg-hover:   #f0f0f0;   /* hover bg */
  --c-border:     #e5e5e5;   /* borders / dividers */
  --c-border-strong: #d0d0d0;
  --c-accent:     #d02e2e;   /* highlight / discount / important nav */
  --c-accent-hover: #b62828;
  --c-whatsapp:   #25d366;   /* WhatsApp brand green (floating + cta) */
  --c-whatsapp-hover: #1ebe5a;
  --c-overlay:    rgba(0, 0, 0, .45); /* drawer/modal overlay */
  --c-shadow:     0 2px 12px rgba(0, 0, 0, .04);
  --c-shadow-lg:  0 8px 24px rgba(0, 0, 0, .06);

  /* Dark theme (footer / dark sections) */
  --c-bg-dark:           #090909;
  --c-text-on-dark:      #ffffff;
  --c-text-on-dark-soft: rgba(255, 255, 255, .65);
  --c-text-on-dark-mute: rgba(255, 255, 255, .4);
  --c-border-on-dark:    rgba(255, 255, 255, .15);

  /* —— Font families —— */
  --f-body:    "Instrument Sans", system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  --f-display: "Barlow", "Instrument Sans", system-ui, "PingFang SC", sans-serif;

  /* —— Font sizes —— */
  --fs-xs:    11px;
  --fs-sm:    12px;          /* announcement / small labels */
  --fs-nav:   12px;          /* desktop nav */
  --fs-base:  14px;          /* body */
  --fs-md:    16px;          /* form inputs */
  --fs-lg:    18px;
  --fs-xl:    22px;          /* drawer menu items */
  --fs-h3:    24px;          /* logo / small heading */
  --fs-h2:    32px;
  --fs-h1:    44px;          /* page heading */
  --fs-hero:  64px;          /* hero display */

  /* —— Font weights —— */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-bold:    700;
  --fw-display: 800;         /* Barlow heading */

  /* —— Line heights —— */
  --lh-tight:   1.15;
  --lh-base:    1.5;
  --lh-loose:   1.7;

  /* —— Letter spacing —— */
  --ls-tight:    -.01em;
  --ls-normal:   0;
  --ls-wide:     .04em;
  --ls-wider:    .1em;
  --ls-widest:   .14em;      /* uppercase nav */

  /* —— Spacing (8px grid) —— */
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:   12px;
  --sp-4:   16px;
  --sp-5:   20px;
  --sp-6:   24px;
  --sp-8:   32px;
  --sp-10:  40px;
  --sp-12:  48px;
  --sp-16:  64px;
  --sp-20:  80px;
  --sp-24:  96px;

  /* —— Radius —— */
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   12px;
  --r-pill: 999px;

  /* —— Container —— */
  --container-max: 1600px;
  --container-pad: 40px;
  --container-pad-mobile: 16px;

  /* —— Header —— */
  --header-h:        78px;
  --header-h-mobile: 60px;

  /* —— Drawer —— */
  --drawer-w: 420px;

  /* —— Motion —— */
  --t-fast: .18s ease;
  --t-base: .3s cubic-bezier(.4, 0, .22, 1);
  --t-slow: .5s cubic-bezier(.4, 0, .22, 1);

  /* —— Breakpoints (JS only; CSS uses @media (max-width: ...)) —— */
  --bp-mobile:  480px;
  --bp-tablet:  750px;
  --bp-desktop: 990px;
  --bp-wide:    1400px;
}

/* ── Mobile overrides ─────────────────── */
@media (max-width: 989px) {
  :root {
    --container-pad: var(--container-pad-mobile);
    --fs-h1: 32px;
    --fs-h2: 24px;       /* shrink section__title to prevent overflow */
    --fs-hero: 40px;
    --container-pad: 16px;
  }
}

/* ── Global reset (shared by all components) ── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--f-body);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0;
}
ul, ol { list-style: none; padding: 0; margin: 0; }
img, svg { display: block; max-width: 100%; }
input, textarea, select { font: inherit; color: inherit; }
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}