/* =============================================================
   HCS Home — Colors & Typography (D-017 / D-018 / D-019)
   -------------------------------------------------------------
   Single source of truth for colour + type tokens across every
   HCS Home surface. Pixel-sampled from the colourful logo:
   Forest green, Terracotta, Marigold, warm cream neutrals.

   Source of truth — do not duplicate these tokens elsewhere.
   Handoff bundle: claude.ai/design 3lJeiBLF7YnkjXnAv3EvXw
   Locked 2026-04-18.
   ============================================================= */

/* --- IBM Plex Sans family — self-hosted (weights 100–700 + italics) -- */
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 100; src: url("../fonts/IBMPlexSans-Thin.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 200; src: url("../fonts/IBMPlexSans-ExtraLight.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 300; src: url("../fonts/IBMPlexSans-Light.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; font-style: italic; font-weight: 300; src: url("../fonts/IBMPlexSans-LightItalic.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; src: url("../fonts/IBMPlexSans-Regular.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; font-style: italic; font-weight: 400; src: url("../fonts/IBMPlexSans-Italic.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; src: url("../fonts/IBMPlexSans-Medium.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; font-style: italic; font-weight: 500; src: url("../fonts/IBMPlexSans-MediumItalic.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; src: url("../fonts/IBMPlexSans-SemiBold.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; font-style: italic; font-weight: 600; src: url("../fonts/IBMPlexSans-SemiBoldItalic.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 700; src: url("../fonts/IBMPlexSans-Bold.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; font-style: italic; font-weight: 700; src: url("../fonts/IBMPlexSans-BoldItalic.ttf") format("truetype"); font-display: swap; }

@font-face { font-family: "IBM Plex Sans Condensed"; font-style: normal; font-weight: 400; src: url("../fonts/IBMPlexSans_Condensed-Regular.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "IBM Plex Sans Condensed"; font-style: normal; font-weight: 500; src: url("../fonts/IBMPlexSans_Condensed-Medium.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "IBM Plex Sans Condensed"; font-style: normal; font-weight: 600; src: url("../fonts/IBMPlexSans_Condensed-SemiBold.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "IBM Plex Sans Condensed"; font-style: normal; font-weight: 700; src: url("../fonts/IBMPlexSans_Condensed-Bold.ttf") format("truetype"); font-display: swap; }

@font-face { font-family: "IBM Plex Sans SemiCondensed"; font-style: normal; font-weight: 400; src: url("../fonts/IBMPlexSans_SemiCondensed-Regular.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "IBM Plex Sans SemiCondensed"; font-style: normal; font-weight: 500; src: url("../fonts/IBMPlexSans_SemiCondensed-Medium.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "IBM Plex Sans SemiCondensed"; font-style: normal; font-weight: 600; src: url("../fonts/IBMPlexSans_SemiCondensed-SemiBold.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "IBM Plex Sans SemiCondensed"; font-style: normal; font-weight: 700; src: url("../fonts/IBMPlexSans_SemiCondensed-Bold.ttf") format("truetype"); font-display: swap; }

/* IBM Plex Serif — editorial, pull-quotes, Behtar Notes, "Build Behtar" tagline */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Serif:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap');

:root {
  /* =========================================================
     COLOUR — Brand primitives (sampled from the colourful logo)
     ========================================================= */

  /* Forest — "home" wordmark, primary brand colour */
  --hcs-forest-900: #132f1e;
  --hcs-forest-800: #1a4028;
  --hcs-forest-700: #205030;
  --hcs-forest-600: #2c6a42;
  --hcs-forest-500: #3a8556;
  --hcs-forest-400: #609060;
  --hcs-forest-300: #8fae8a;
  --hcs-forest-200: #bccdb7;
  --hcs-forest-100: #dfe8dc;
  --hcs-forest-050: #f1f5ef;

  /* Terracotta — warm brick accent */
  --hcs-terracotta-900: #5a1a0d;
  --hcs-terracotta-800: #8a2812;
  --hcs-terracotta-700: #b13318;
  --hcs-terracotta-600: #d04020;
  --hcs-terracotta-500: #de5a34;
  --hcs-terracotta-400: #e87a5a;
  --hcs-terracotta-300: #f0a088;
  --hcs-terracotta-200: #f6c6b6;
  --hcs-terracotta-100: #fbe3da;
  --hcs-terracotta-050: #fdf2ec;

  /* Marigold — sunlight accent (matches earlier Amber) */
  --hcs-marigold-900: #5c3604;
  --hcs-marigold-800: #8a5108;
  --hcs-marigold-700: #b26c10;
  --hcs-marigold-600: #d38418;
  --hcs-marigold-500: #f0a020;
  --hcs-marigold-400: #f4b84f;
  --hcs-marigold-300: #f8cd80;
  --hcs-marigold-200: #fbe0ac;
  --hcs-marigold-100: #fdeed1;
  --hcs-marigold-050: #fef7e6;

  /* Warm neutrals — cream, sand, stone. Never cool grey. */
  --hcs-cream-050: #fcfbf9;
  --hcs-cream-100: #f7f4ee;
  --hcs-cream-200: #efede7;
  --hcs-cream-300: #e6e1d6;
  --hcs-sand-300:  #d8d1c0;
  --hcs-sand-400:  #b8af9a;
  --hcs-stone-500: #8a8174;
  --hcs-stone-600: #5f574b;
  --hcs-stone-700: #3f3a32;
  --hcs-stone-800: #2a2722;
  --hcs-stone-900: #1a1815;
  --hcs-white:     #ffffff;
  --hcs-off-white: #fefdfb;

  /* Peach / coral — bridges cream and terracotta */
  --hcs-peach-050: #fdf6f2;
  --hcs-peach-100: #fbe9df;
  --hcs-peach-200: #f7d6c6;
  --hcs-peach-300: #f3bea8;
  --hcs-peach-400: #e89c81;
  --hcs-peach-500: #d97757;

  /* =========================================================
     COLOUR — Semantic tokens (use these in product, not raw hues)
     ========================================================= */

  /* Backgrounds */
  --bg-page:     var(--hcs-cream-050);
  --bg-surface:  var(--hcs-white);
  --bg-raised:   var(--hcs-white);
  --bg-sunken:   var(--hcs-cream-100);
  --bg-inset:    var(--hcs-cream-200);
  --bg-inverse:  var(--hcs-forest-900);

  /* Foregrounds — warm, never cool */
  --fg-1:        var(--hcs-stone-900);
  --fg-2:        var(--hcs-stone-700);
  --fg-3:        var(--hcs-stone-600);
  --fg-4:        var(--hcs-stone-500);
  --fg-disabled: var(--hcs-sand-400);
  --fg-on-brand: var(--hcs-off-white);
  --fg-inverse:  var(--hcs-cream-050);

  /* Borders — near-invisible on cream */
  --border-subtle:  #ece7dc;
  --border-default: #d8d1c0;
  --border-strong:  var(--hcs-stone-700);
  --border-focus:   var(--hcs-peach-500);

  /* Brand / action */
  --brand:           var(--hcs-forest-700);
  --brand-hover:     var(--hcs-forest-800);
  --brand-pressed:   var(--hcs-forest-900);
  --brand-subtle:    var(--hcs-forest-050);
  --brand-subtle-fg: var(--hcs-forest-800);

  --accent:          var(--hcs-terracotta-600);
  --accent-hover:    var(--hcs-terracotta-700);
  --accent-pressed:  var(--hcs-terracotta-800);
  --accent-subtle:   var(--hcs-terracotta-050);

  --highlight:       var(--hcs-marigold-500);
  --highlight-hover: var(--hcs-marigold-600);
  --highlight-subtle:var(--hcs-marigold-050);

  --peach:           var(--hcs-peach-500);
  --peach-hover:     var(--hcs-terracotta-600);
  --peach-subtle:    var(--hcs-peach-100);
  --peach-soft:      var(--hcs-peach-200);

  /* Status — on-brand */
  --status-success:         var(--hcs-forest-500);
  --status-success-subtle:  var(--hcs-forest-050);
  --status-warning:         var(--hcs-marigold-600);
  --status-warning-subtle:  var(--hcs-marigold-050);
  --status-danger:          var(--hcs-terracotta-700);
  --status-danger-subtle:   var(--hcs-terracotta-050);
  --status-info:            #4a6b7a;
  --status-info-subtle:     #e6ecee;

  /* WhatsApp CTA — terracotta 600 is the locked accent.
     Keep a dedicated token so WhatsApp usage is intentional. */
  --whatsapp-bg:     var(--hcs-terracotta-600);
  --whatsapp-hover:  var(--hcs-terracotta-700);
  --whatsapp-pressed:var(--hcs-terracotta-800);

  /* =========================================================
     TYPOGRAPHY
     ========================================================= */
  --font-sans:      "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display:   "IBM Plex Sans Condensed", "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --font-ui:        "IBM Plex Sans SemiCondensed", "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --font-serif:     "IBM Plex Serif", ui-serif, Georgia, "Times New Roman", serif;
  --font-editorial: "IBM Plex Serif", ui-serif, Georgia, serif;
  --font-mono:      "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-md:   18px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  30px;
  --text-3xl:  38px;
  --text-4xl:  48px;
  --text-5xl:  64px;
  --text-6xl:  84px;
  --text-7xl:  112px;

  --lh-tight:   1.05;
  --lh-snug:    1.15;
  --lh-normal:  1.45;
  --lh-relaxed: 1.6;

  --tracking-tightest: -0.03em;
  --tracking-tight:    -0.015em;
  --tracking-normal:   0em;
  --tracking-wide:     0.04em;
  --tracking-wider:    0.08em;
  --tracking-widest:   0.14em;

  /* =========================================================
     SHAPE — radii, borders, shadows
     ========================================================= */
  --radius-xs:    2px;
  --radius-sm:    4px;
  --radius-md:    8px;
  --radius-lg:    12px;
  --radius-xl:    20px;
  --radius-2xl:   28px;
  --radius-pill:  999px;

  --border-width: 1px;
  --border-width-thick: 2px;

  /* Shadows — warm-tinted (brown), never cool black */
  --shadow-xs: 0 1px 0 rgba(58, 40, 18, 0.04);
  --shadow-sm: 0 1px 2px rgba(58, 40, 18, 0.06), 0 1px 1px rgba(58, 40, 18, 0.04);
  --shadow-md: 0 4px 10px rgba(58, 40, 18, 0.06), 0 2px 4px rgba(58, 40, 18, 0.04);
  --shadow-lg: 0 12px 24px rgba(58, 40, 18, 0.08), 0 4px 8px rgba(58, 40, 18, 0.04);
  --shadow-xl: 0 24px 48px rgba(58, 40, 18, 0.10), 0 8px 16px rgba(58, 40, 18, 0.06);

  --focus-ring: 0 0 0 3px rgba(240, 160, 32, 0.35);

  /* =========================================================
     SPACE — 4px base scale
     ========================================================= */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 64px;
  --space-11: 80px;
  --space-12: 96px;
  --space-13: 128px;

  /* =========================================================
     MOTION — quiet, purposeful only
     ========================================================= */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-in:     cubic-bezier(0.55, 0, 1, 0.45);
  --dur-fast:   120ms;
  --dur-base:   200ms;
  --dur-slow:   360ms;
}

/* =============================================================
   BASE — semantic defaults, so plain HTML looks branded
   ============================================================= */
html {
  color-scheme: light;
  /* Native browser scroll — no smooth scroll per Website Principles §2 */
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-relaxed);
  color: var(--fg-1);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  color: var(--fg-1);
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-tight);
  text-wrap: balance;
}
h1 { font-size: var(--text-5xl); font-weight: var(--fw-bold); letter-spacing: var(--tracking-tightest); }
h2 { font-size: var(--text-4xl); }
h3 { font-size: var(--text-3xl); }
h4 { font-size: var(--text-2xl); line-height: var(--lh-snug); }
h5 { font-size: var(--text-xl);  line-height: var(--lh-snug); font-weight: var(--fw-semibold); }
h6 { font-size: var(--text-md);  line-height: var(--lh-snug); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--fg-3); }

p { margin: 0 0 var(--space-4); line-height: var(--lh-relaxed); color: var(--fg-2); text-wrap: pretty; }

small { font-size: var(--text-sm); color: var(--fg-3); }

a {
  color: var(--brand);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in oklab, var(--brand) 40%, transparent);
  transition: color var(--dur-fast) var(--ease-out), text-decoration-color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--brand-hover); text-decoration-color: currentColor; }
a:active { color: var(--brand-pressed); }
a:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-xs); }

strong, b { font-weight: var(--fw-semibold); color: inherit; }
em, i { font-style: italic; }

hr { border: none; border-top: 1px solid var(--border-subtle); margin: var(--space-7) 0; }

/* Eyebrow — small caps label, above section headings */
.eyebrow,
[data-eyebrow] {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--accent);
}

/* Display — impactful numbers / heads */
.display {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tightest);
  line-height: var(--lh-tight);
}

/* Brand name — HCS Home wordmark: sans bold always */
.brand-name {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-style: normal;
  color: inherit;
}

/* "Build Behtar" tagline — serif italic bold */
.tagline,
.build-behtar {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: var(--fw-bold);
  color: var(--highlight);
}

::selection { background: color-mix(in oklab, var(--highlight) 40%, transparent); color: var(--fg-1); }

/* Reduced motion — respect OS preference */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* =============================================================
   BUTTON PRIMITIVES — one system sitewide (Website Principles §3)
   ============================================================= */
.btn {
  --btn-bg: var(--brand);
  --btn-fg: var(--fg-on-brand);
  --btn-bg-hover: var(--brand-hover);
  --btn-bg-active: var(--brand-pressed);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: 44px;
  padding: 0 var(--space-6);
  min-width: 88px;
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  text-decoration: none;
  transition:
    background-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
  user-select: none;
}
.btn:hover  { background: var(--btn-bg-hover); color: var(--btn-fg); text-decoration: none; }
.btn:active { background: var(--btn-bg-active); transform: translateY(1px); }
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.btn[disabled], .btn[aria-disabled="true"] {
  background: var(--fg-disabled); color: var(--fg-on-brand);
  cursor: not-allowed; opacity: 0.6; transform: none;
}

/* Ghost — no fill, hover tint (secondary) */
.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--fg-1);
  --btn-bg-hover: var(--bg-sunken);
  --btn-bg-active: var(--bg-inset);
}

/* Outline — bordered card-like (alternative secondary).
   Hover INVERTS to dark bg + white text for unambiguous feedback.
   (Updated per claude.ai/design handoff df_Cs98S0IrTesopidmD-A;
   the earlier "lift to --bg-sunken" was too subtle on cream.) */
.btn--outline {
  --btn-bg: var(--bg-raised);
  --btn-fg: var(--fg-1);
  --btn-bg-hover: var(--fg-1);
  --btn-bg-active: var(--hcs-stone-900);
  border-color: var(--border-default);
  transition:
    background-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}
.btn--outline:hover,
.btn--outline:active {
  color: var(--fg-on-brand);
  border-color: var(--fg-1);
}

/* WhatsApp — terracotta 600. One locked variant for the sitewide WhatsApp CTA. */
.btn--whatsapp {
  --btn-bg: var(--whatsapp-bg);
  --btn-fg: #ffffff;
  --btn-bg-hover: var(--whatsapp-hover);
  --btn-bg-active: var(--whatsapp-pressed);
}

/* Ghost-light — for dark surfaces (forest band, footer) */
.btn--ghost-light {
  --btn-bg: transparent;
  --btn-fg: var(--hcs-off-white);
  --btn-bg-hover: rgba(255,255,255,0.08);
  --btn-bg-active: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.5);
}

/* Size variants */
.btn--lg { height: 52px; padding: 0 var(--space-7); font-size: var(--text-base); }
.btn--sm { height: 36px; padding: 0 var(--space-4); font-size: var(--text-xs); }

/* Chips / tags */
.chip {
  display: inline-flex; align-items: center; gap: var(--space-2);
  height: 28px; padding: 0 var(--space-3);
  font-family: var(--font-ui); font-size: var(--text-xs); font-weight: var(--fw-medium);
  line-height: 1; letter-spacing: 0.02em;
  color: var(--fg-2);
  background: transparent;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-pill);
}

/* =============================================================
   MIGRATION COMPAT SHIMS
   -------------------------------------------------------------
   Map legacy token names (style.css, redesign-base.css) to the
   new system so existing page CSS keeps resolving while pages
   are migrated. Remove each shim when its legacy uses are gone.
   ============================================================= */
:root {
  --cream:           var(--bg-page);
  --cream-strong:    var(--hcs-cream-200);
  --charcoal:        var(--fg-1);
  --charcoal-soft:   var(--fg-2);
  --dark-green:      var(--brand);
  --dark-green-deep: var(--hcs-forest-900);
  --amber:           var(--highlight);
  --red-orange:      var(--whatsapp-bg);
  --white:           var(--hcs-white);
  --text-muted:      var(--fg-3);
  --text-soft:       var(--fg-4);
  --border-soft:     var(--border-subtle);
  --content-max:     1360px;
  --narrow-max:      1120px;
  --measure:         67ch;
  --page-gutter:     18px;
  --section-pad:     60px;
  --nav-height:      76px;
  --font-sans-legacy: var(--font-sans);
}
@media (min-width: 768px) {
  :root { --page-gutter: 34px; --section-pad: 80px; --nav-height: 82px; }
}
@media (min-width: 1024px) {
  :root { --page-gutter: 52px; --section-pad: 104px; --nav-height: 88px; }
}