/* ==========================================================================
   Design tokens — the single source of truth for every value in the theme.
   Source: Figma "Style Guide & Components" (58:893). See docs/design-system.md.
   Never write a raw hex or px font-size anywhere else.
   ========================================================================== */

:root {
  /* --- Color: Primary ---------------------------------------------------- */
  --c-primary: #283a20;
  --c-accent: #9a9671;
  --c-secondary: #6f6f6e;

  /* --- Color: Basic ------------------------------------------------------ */
  --c-black: #181312;
  --c-white: #f5f5f5;

  /* --- Color: Neutral ---------------------------------------------------- */
  --c-neutral-1: #584f4d;
  --c-neutral-2: #988f8d;
  --c-neutral-3: #e7e7e7;
  --c-neutral-4: #f3f3f2;
  --c-neutral-5: #ffffff;

  /* Breadcrumb rule — Figma 92:915. */
  --c-hairline: #f2efef;

  /* Dark-surface pair used on the Reviews section (Figma 69:970). */
  --c-dark-surface: #2a3d21;
  --c-dark-border: #374b2e;
  --c-dark-meta: #8f988a; /* Figma 185:3402 — secondary text on the dark ground. */
  --c-dark-text-muted: #9ca997; /* Figma 282:4168 — list body text on the dark ground. */
  --c-seal-ink: #645225; /* Gold hero seal (designer's Seal.svg, 2026-09-24) — text and icon. */

  /* --- Footer surfaces — Figma 73:1393 ----------------------------------- */
  --c-footer-bg: var(--c-neutral-1);      /* #584F4D */
  --c-footer-border: #6a605e;             /* Figma 68:127 — social card outline */
  --c-footer-label: #ccc5c4;              /* Figma 68:103 — social card label */
  --c-footer-meta: #857875;               /* Figma 73:1389 — bottom bar */
  --c-footer-rule: #6a605e;               /* Figma 73:1388 */

  /* Brand tiles behind the exported glyphs — Figma 68:118 / 68:146 / 68:147. */
  --c-social-facebook: #1976d2;
  --c-social-youtube: #ff0000;
  --g-social-instagram: linear-gradient(45deg,
    #fee411 11.929%, #fedb16 15.624%, #fec125 21.734%, #fe983d 29.55%,
    #fe5f5e 38.646%, #fe2181 47.456%, #9000dc 82.984%);

  /* Lightbox backdrop (certificate viewer) — --c-black at 92%. */
  --c-overlay: rgb(24 19 18 / 92%);

  /* --- Color: System ----------------------------------------------------- */
  --c-success: #41dc87;
  --c-info: #3799e4;
  --c-warning: #ffd000;
  --c-error: #d03016;

  /* --- Semantic aliases -------------------------------------------------- */
  --c-text: var(--c-black);
  --c-text-muted: var(--c-neutral-1);
  --c-text-invert: var(--c-white);
  --c-bg: var(--c-white); /* Updated Figma 2026-09-15: every page ground is Basic/White #F5F5F5 */
  --c-bg-alt: var(--c-neutral-4); /* #F3F3F2 — still used for bands in the updated Figma (97:1268, 149:2359, 167:2340) */
  --c-bg-dark: var(--c-primary);
  --c-border: var(--c-neutral-3);
  --c-link: var(--c-primary);
  --c-link-hover: var(--c-accent);

  /* --- Typography: families ---------------------------------------------- */
  --ff-heading: "Lora", "Georgia", "Times New Roman", serif;
  --ff-body: "Manrope", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

  /* --- Typography: weights ----------------------------------------------- */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* --- Typography: sizes -------------------------------------------------
     clamp() interpolates between the mobile value (390px viewport) and the
     desktop value (1440px viewport) — the only two ends Figma specifies.     */
  --fs-h1: clamp(2.75rem, 1.879rem + 3.574vw, 4.625rem);      /*  44 -> 74 */
  --fs-h2: clamp(2rem, 1.419rem + 2.383vw, 3.25rem);          /*  32 -> 52 */
  --fs-h3: clamp(1.625rem, 0.844rem + 3.203vw, 2.875rem);     /*  26 -> 46 */
  --fs-h4: clamp(1.5rem, 1.268rem + 0.953vw, 2rem);           /*  24 -> 32 */
  --fs-h5: clamp(1.3125rem, 1.221rem + 0.375vw, 1.625rem);    /*  21 -> 26 */
  --fs-h6: clamp(1.125rem, 1.055rem + 0.286vw, 1.3125rem);    /*  18 -> 21 */
  --fs-body: clamp(1rem, 0.942rem + 0.238vw, 1.125rem);       /*  16 -> 18 */
  --fs-body-sm: clamp(0.875rem, 0.817rem + 0.238vw, 1rem);    /*  14 -> 16 */
  --fs-small: clamp(0.75rem, 0.692rem + 0.238vw, 0.875rem);   /*  12 -> 14 */
  --fs-eyebrow: 0.75rem;                                        /*  12 — tracked uppercase labels, Figma 120:3160 */
  --fs-pill-xs: 0.625rem;                                      /*  10 — hero pills on phones, Figma 281:3613 */
  --fs-btn-lg: 0.875rem;                                       /*  14 fixed */
  --fs-btn-sm: 0.875rem;                                       /*  14 fixed */

  /* --- Typography: line heights ------------------------------------------ */
  --lh-display: 1;      /* H1-H4 */
  --lh-heading: 1.1;    /* H5-H6 */
  --lh-body: 1.5;
  --lh-tight: 1.4;      /* buttons, secondary text on mobile */

  /* --- Typography: letter spacing ---------------------------------------- */
  --ls-display: -0.05em;   /* H1-H4 desktop */
  --ls-heading: -0.03em;   /* H5, mobile headings */
  --ls-h6: -0.02em;
  --ls-body: -0.01em;
  --ls-button: -0.02em;

  /* --- Layout ------------------------------------------------------------ */
  /* Content width. Every 1440px Figma frame sets content at 1240px with 100px
     either side (e.g. 180:2686, 176:2495). */
  --container: 1240px;
  --container-narrow: 900px;
  --gutter: clamp(1.25rem, 3.472vw, 3.125rem);   /* 20 -> 50 */

  /* --- Spacing scale ----------------------------------------------------- */
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;
  --space-5xl: 8rem;

  /* Vertical rhythm between page sections. */
  --section-y: clamp(3rem, 6vw, 7.5rem);

  /* --- Radii ------------------------------------------------------------- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* --- Borders ----------------------------------------------------------- */
  --border-width: 1px;
  --border: var(--border-width) solid var(--c-border);

  /* --- Elevation --------------------------------------------------------- */
  --shadow-sm: 0 1px 2px rgb(24 19 18 / 6%);
  --shadow-md: 0 4px 16px rgb(24 19 18 / 8%);
  --shadow-lg: 0 12px 40px rgb(24 19 18 / 12%);
  --shadow-seal: 0 6px 14px rgb(154 112 19 / 25%); /* gold seal, from its darkest stop #9A7013 */

  /* --- Motion ------------------------------------------------------------ */
  --dur-fast: 150ms;
  --dur: 250ms;
  --dur-slow: 400ms;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);

  /* --- Layering ---------------------------------------------------------- */
  --z-base: 1;
  --z-sticky: 100;
  --z-header: 200;
  --z-drawer: 300;
  --z-modal: 400;

  /* --- Component metrics (from Figma) ------------------------------------ */
  --header-height: 72px;
  --header-height-mobile: 63px;
  --info-panel-height: 34px;
  --btn-height-md: 58px;
  --btn-height-sm: 38px;
  --icon-btn-size: 40px;
  --arrow-size: 42px;
}

@media (max-width: 1024px) {
  :root {
    --ls-display: -0.03em;
  }
}