/* Brandon Grotesque — Khurana Constructions brand typeface (HVD Fonts).
   Real font files shipped in assets/fonts. Six weights + matching italics. */

@font-face {
  font-family: "Brandon Grotesque";
  src: url("../fonts/Brandon_thin.otf") format("opentype");
  font-weight: 100; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Brandon Grotesque";
  src: url("../fonts/Brandon_thin_it.otf") format("opentype");
  font-weight: 100; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Brandon Grotesque";
  src: url("../fonts/Brandon_light.otf") format("opentype");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Brandon Grotesque";
  src: url("../fonts/Brandon_light_it.otf") format("opentype");
  font-weight: 300; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Brandon Grotesque";
  src: url("../fonts/Brandon_reg.otf") format("opentype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Brandon Grotesque";
  src: url("../fonts/Brandon_reg_it.otf") format("opentype");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Brandon Grotesque";
  src: url("../fonts/Brandon_med.otf") format("opentype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Brandon Grotesque";
  src: url("../fonts/Brandon_med_it.otf") format("opentype");
  font-weight: 500; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Brandon Grotesque";
  src: url("../fonts/Brandon_bld.otf") format("opentype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Brandon Grotesque";
  src: url("../fonts/Brandon_bld_it.otf") format("opentype");
  font-weight: 700; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Brandon Grotesque";
  src: url("../fonts/Brandon_blk.otf") format("opentype");
  font-weight: 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Brandon Grotesque";
  src: url("../fonts/Brandon_blk_it.otf") format("opentype");
  font-weight: 900; font-style: italic; font-display: swap;
}

/* ============================================================
   COLORS — Khurana Constructions
   Brand: signal yellow + near-black ink. Industrial, high-contrast.
   Yellow is the accent of action and emphasis, never a large wash.
   ============================================================ */
:root {
  /* ---- Brand core ---- */
  --kc-yellow:        #FCD410;  /* signal yellow — sampled from emblem */
  --kc-yellow-600:    #E6BE00;  /* hover / pressed yellow */
  --kc-yellow-300:    #FDE468;  /* tints, highlights */
  --kc-yellow-100:    #FFF6CE;  /* faint wash, hover surface */
  --kc-ink:           #1D1D1B;  /* near-black ink — sampled from logo */
  --kc-ink-pure:      #000000;
  --kc-white:         #FFFFFF;

  /* ---- Neutral scale (warm-cool concrete grays) ---- */
  --kc-n-950:  #141413;
  --kc-n-900:  #1D1D1B;
  --kc-n-800:  #2E2E2B;
  --kc-n-700:  #46453F;
  --kc-n-600:  #5F5E56;
  --kc-n-500:  #7C7B72;
  --kc-n-400:  #9C9B92;
  --kc-n-300:  #BFBEB6;
  --kc-n-200:  #DAD9D2;
  --kc-n-150:  #E7E6E0;
  --kc-n-100:  #F1F0EB;
  --kc-n-50:   #F8F7F3;

  /* ---- Semantic status ---- */
  --kc-success:   #2F8F4E;
  --kc-success-bg:#E8F3EB;
  --kc-warning:   #C7811A;
  --kc-warning-bg:#FBF1DE;
  --kc-danger:    #C23B36;
  --kc-danger-bg: #F8E7E6;
  --kc-info:      #2B6CB0;
  --kc-info-bg:   #E6EEF6;

  /* ============================================================
     SEMANTIC ALIASES — reach for these in product code
     ============================================================ */
  /* Surfaces */
  --surface-page:      var(--kc-n-50);
  --surface-card:      var(--kc-white);
  --surface-sunken:    var(--kc-n-100);
  --surface-inverse:   var(--kc-ink);
  --surface-brand:     var(--kc-yellow);

  /* Text */
  --text-strong:       var(--kc-ink);
  --text-body:         var(--kc-n-800);
  --text-muted:        var(--kc-n-600);
  --text-faint:        var(--kc-n-500);
  --text-on-brand:     var(--kc-ink);     /* dark text on yellow */
  --text-on-inverse:   var(--kc-white);
  --text-link:         var(--kc-ink);

  /* Borders & lines */
  --border-subtle:     var(--kc-n-200);
  --border-default:    var(--kc-n-300);
  --border-strong:     var(--kc-ink);
  --border-brand:      var(--kc-yellow);

  /* Interactive accents */
  --accent:            var(--kc-yellow);
  --accent-hover:      var(--kc-yellow-600);
  --focus-ring:        var(--kc-ink);
}
/* ============================================================
   TYPOGRAPHY — Khurana Constructions
   One family, Brandon Grotesque, doing all the work.
   Display = Black (900) tight & condensed feel via tracking.
   Headings = Bold (700). Body = Regular (400)/Medium (500).
   Eyebrows / labels = uppercase, wide tracking — the "engineering
   drawing" voice of the brand.
   ============================================================ */
:root {
  --font-display: "Brandon Grotesque", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Brandon Grotesque", "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Weights */
  --fw-thin:    100; /* @kind font */
  --fw-light:   300; /* @kind font */
  --fw-regular: 400; /* @kind font */
  --fw-medium:  500; /* @kind font */
  --fw-bold:    700; /* @kind font */
  --fw-black:   900; /* @kind font */

  /* Type scale (rem, 16px base) */
  --fs-display-xl: 5.0rem;   /* hero */
  --fs-display-l:  3.75rem;
  --fs-display-m:  2.75rem;
  --fs-h1:         2.25rem;
  --fs-h2:         1.75rem;
  --fs-h3:         1.375rem;
  --fs-h4:         1.125rem;
  --fs-body-lg:    1.1875rem;
  --fs-body:       1.0rem;
  --fs-body-sm:    0.875rem;
  --fs-caption:    0.75rem;
  --fs-eyebrow:    0.8125rem;

  /* Line heights */
  --lh-tight:   1.02; /* @kind font */
  --lh-snug:    1.18; /* @kind font */
  --lh-normal:  1.5; /* @kind font */
  --lh-relaxed: 1.65; /* @kind font */

  /* Letter spacing */
  --ls-display:  -0.02em;   /* @kind font */
  --ls-heading:  -0.01em; /* @kind font */
  --ls-body:      0; /* @kind font */
  --ls-eyebrow:   0.18em;   /* @kind font */
  --ls-label:     0.06em; /* @kind font */
}
/* ============================================================
   SPACING & SIZING — Khurana Constructions
   4px base grid. Generous, structural rhythm.
   ============================================================ */
:root {
  --space-0:   0;
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;
  --space-32:  128px;

  /* Layout */
  --container-max: 1200px;
  --container-wide: 1440px;
  --gutter:        24px;
  --section-y:     96px;

  /* Radii — squared, structural. Yellow circle is the only round form. */
  --radius-none: 0;
  --radius-sm:   2px;
  --radius-md:   4px;
  --radius-lg:   8px;
  --radius-pill: 999px;
}
/* ============================================================
   EFFECTS — shadows, borders, motion
   Khurana is structural and grounded: shadows are subtle and
   functional, never glowy. Motion is brisk and mechanical.
   ============================================================ */
:root {
  /* Elevation — soft, neutral, low-spread */
  --shadow-xs:  0 1px 2px rgba(29,29,27,0.06);
  --shadow-sm:  0 1px 3px rgba(29,29,27,0.08), 0 1px 2px rgba(29,29,27,0.04);
  --shadow-md:  0 4px 12px rgba(29,29,27,0.08), 0 2px 4px rgba(29,29,27,0.04);
  --shadow-lg:  0 12px 32px rgba(29,29,27,0.12), 0 4px 8px rgba(29,29,27,0.05);
  --shadow-brand: 0 8px 24px rgba(252,212,16,0.35);

  /* Hairlines */
  --hairline:        1px solid var(--border-subtle);
  --hairline-strong: 1px solid var(--border-strong);
  --rule-accent:     3px solid var(--kc-yellow);  /* the signature yellow underline */

  /* Motion */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --dur-fast:    120ms; /* @kind other */
  --dur-base:    200ms; /* @kind other */
  --dur-slow:    360ms; /* @kind other */

  /* Focus */
  --focus-ring-width: 2px; /* @kind other */
  --focus-ring-offset: 2px; /* @kind other */
}
/* ============================================================
   BASE — element defaults built on the tokens.
   Mono face (IBM Plex Mono) pulled from Google Fonts for spec/
   data captions; brand display + body are Brandon Grotesque.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-body);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--text-strong);
  margin: 0 0 0.5em;
  line-height: var(--lh-snug);
  text-wrap: balance;
}
h1 { font-weight: var(--fw-black); font-size: var(--fs-h1); letter-spacing: var(--ls-heading); }
h2 { font-weight: var(--fw-bold);  font-size: var(--fs-h2); letter-spacing: var(--ls-heading); }
h3 { font-weight: var(--fw-bold);  font-size: var(--fs-h3); }
h4 { font-weight: var(--fw-medium); font-size: var(--fs-h4); }

p { margin: 0 0 1em; text-wrap: pretty; }

a { color: var(--text-link); text-decoration: none; }

/* The brand voice: tracked-out uppercase eyebrow */
.kc-eyebrow {
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
}
/* Yellow tick that precedes eyebrows / section labels */
.kc-eyebrow--tick::before {
  content: "";
  display: inline-block;
  width: 18px; height: 3px;
  background: var(--kc-yellow);
  vertical-align: middle;
  margin-right: 10px;
  transform: translateY(-2px);
}

.kc-mono {
  font-family: var(--font-mono);
  font-size: var(--fs-body-sm);
  letter-spacing: 0;
}

::selection { background: var(--kc-yellow); color: var(--kc-ink); }