/* Harmony by the Sea: design tokens, version 3.0 (18.10.2026)
   Source of truth: 01 Brand/Guidelines/design-system.md. Colours are measured from the building's materials.
   Dark-led: Graphite (the ribbed facade cladding) is the main colour; Teak is the single warm accent.
   Fonts (web): load from Google Fonts with
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+Display:ital,wght@0,300;0,400;0,500;1,400&family=Manrope:wght@400;500;600&display=swap" rel="stylesheet">
   and set <html lang="bg">. Standard Cyrillic letterforms are used, so the Bulgarian locl
   alternates in Manrope are switched off below. */

:root {
  /* Colour: core (from the building) */
  --hbts-graphite: #0E1013;     /* ribbed black facade cladding: main colour, backgrounds, text on light */
  --hbts-teak: #A96C34;         /* HPL teak cladding: the accent (logo swell, highlights, icons) */
  --hbts-limestone: #E9E5DE;    /* light granite and render in warm light: text on dark, light pages */

  /* Colour: supporting (from the building) */
  --hbts-anthracite: #1B1E21;   /* window frames, doors: raised surfaces on dark */
  --hbts-teak-light: #C8915A;   /* teak in sun: accent text, links and primary buttons on dark */
  --hbts-teak-deep: #6E421D;    /* teak in shade: accent text, links and buttons on light */
  --hbts-granite: #8E9196;      /* granite base and steps: secondary text on dark */
  --hbts-granite-dark: #4F5358; /* dark granite: secondary text on light */
  --hbts-stone: #D6D1CA;        /* pale granite: light surfaces, borders on light */
  --hbts-white: #FFFFFF;

  /* Colour: roles, dark (default) */
  --hbts-bg: var(--hbts-graphite);
  --hbts-surface: var(--hbts-anthracite);
  --hbts-text: var(--hbts-limestone);
  --hbts-text-muted: var(--hbts-granite);
  --hbts-accent: var(--hbts-teak-light);
  --hbts-link: var(--hbts-teak-light);
  --hbts-border: rgba(233, 229, 222, 0.14);
  --hbts-focus: var(--hbts-teak-light);

  /* Colour: roles, light (long reading, forms, printed pages) */
  --hbts-light-bg: var(--hbts-limestone);
  --hbts-light-surface: var(--hbts-white);
  --hbts-light-surface-alt: var(--hbts-stone);
  --hbts-light-text: var(--hbts-graphite);
  --hbts-light-text-muted: var(--hbts-granite-dark);
  --hbts-light-accent: var(--hbts-teak);
  --hbts-light-link: var(--hbts-teak-deep);
  --hbts-light-border: var(--hbts-stone);

  /* Backgrounds: solid Graphite by default; the depth gradient behind the logo and headlines
     (heroes, covers, banners, end cards). No textures, no light effects. */
  --hbts-night: #060708;        /* the deepest edge of the depth gradient */
  --hbts-depth: radial-gradient(ellipse 85% 75% at 50% 38%, #181B1F 0%, #0E1013 48%, #060708 100%);

  /* Type: families */
  --hbts-font-display: "Noto Serif Display", Georgia, "Times New Roman", serif; /* the name, headings */
  --hbts-font-sans: "Manrope", "Segoe UI", Arial, sans-serif;                    /* body, UI, numbers */

  /* Type: scale (web) */
  --hbts-fs-display: clamp(2.75rem, 1.9rem + 3.4vw, 4.5rem); /* 44 to 72 px */
  --hbts-fs-h1: clamp(2.25rem, 1.75rem + 2vw, 3.25rem);      /* 36 to 52 px */
  --hbts-fs-h2: clamp(1.75rem, 1.45rem + 1.2vw, 2.375rem);   /* 28 to 38 px */
  --hbts-fs-h3: 1.5rem;      /* 24 px display */
  --hbts-fs-h4: 1.125rem;    /* 18 px sans 600 */
  --hbts-fs-lead: 1.25rem;   /* 20 px */
  --hbts-fs-body: 1.0625rem; /* 17 px */
  --hbts-fs-small: 0.9375rem;/* 15 px */
  --hbts-fs-caption: 0.8125rem;/* 13 px */

  --hbts-lh-tight: 1.08;
  --hbts-lh-heading: 1.18;
  --hbts-lh-body: 1.6;
  --hbts-fw-display: 400;
  --hbts-fw-display-light: 300;
  --hbts-fw-body: 400;
  --hbts-fw-medium: 500;
  --hbts-fw-strong: 600;
  --hbts-tracking-caps: 0.16em; /* only for short uppercase labels and buttons */
  --hbts-measure: 66ch;

  /* Spacing: 4 px base */
  --hbts-space-1: 4px;
  --hbts-space-2: 8px;
  --hbts-space-3: 12px;
  --hbts-space-4: 16px;
  --hbts-space-5: 24px;
  --hbts-space-6: 32px;
  --hbts-space-7: 48px;
  --hbts-space-8: 64px;
  --hbts-space-9: 96px;
  --hbts-space-10: 128px;
  --hbts-gutter: clamp(16px, 4vw, 40px);
  --hbts-section: clamp(80px, 11vw, 160px);
  --hbts-container: 1200px;

  /* Shape: crisp, like the building */
  --hbts-radius: 0;
  --hbts-radius-s: 2px;
}

/* Standard Cyrillic letterforms under lang="bg" (brand decision, 18.10.2026).
   !important because the `font:` shorthand resets font-feature-settings. */
:lang(bg) { font-feature-settings: "locl" 0 !important; }

/* Optional base styles: dark by default, add .hbts-light for light sections */
.hbts {
  background: var(--hbts-bg);
  color: var(--hbts-text);
  font-family: var(--hbts-font-sans);
  font-size: var(--hbts-fs-body);
  line-height: var(--hbts-lh-body);
}
.hbts-light {
  background: var(--hbts-light-bg);
  color: var(--hbts-light-text);
  --hbts-text-muted: var(--hbts-light-text-muted);
  --hbts-link: var(--hbts-light-link);
  --hbts-accent: var(--hbts-light-accent);
  --hbts-border: var(--hbts-light-border);
}
.hbts h1, .hbts h2, .hbts h3 {
  font-family: var(--hbts-font-display);
  font-weight: var(--hbts-fw-display);
  line-height: var(--hbts-lh-heading);
}
.hbts h1 { font-size: var(--hbts-fs-h1); line-height: var(--hbts-lh-tight); }
.hbts h2 { font-size: var(--hbts-fs-h2); }
.hbts h3 { font-size: var(--hbts-fs-h3); }
.hbts h4 { font-family: var(--hbts-font-sans); font-size: var(--hbts-fs-h4); font-weight: var(--hbts-fw-strong); }
.hbts p { max-width: var(--hbts-measure); }
.hbts a { color: var(--hbts-link); text-underline-offset: 0.18em; }
.hbts-depth { background: var(--hbts-depth); background-color: var(--hbts-graphite); }