/* =============================================================
   JYT Architectural Consultancy — Foundations
   Colours & typography. Import once at the top of any artifact.

   Fonts:
     Gotham       — licensed brand font, loaded from /fonts/.
                    Files supplied: Thin, Light, Bold, Black.
                    Regular (400) + Medium (500) are not supplied;
                    we route 400/500 to Light for now. Ask the client
                    for Gotham Book / Medium if available.
     Freight Text — licensed; still substituted with Source Serif 4
                    via Google Fonts until files are provided.
   ============================================================= */

/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;1,400;1,500&family=Montserrat:wght@300;400;500;600&family=Noto+Sans:wght@300;400;500&family=Source+Serif+4:ital,opsz,wght@0,8..60,300;0,8..60,400;1,8..60,400&family=Cormorant+Garamond:ital,wght@0,300;0,400;1,300;1,400&display=swap');

/* ---------- Gotham (brand) ----------------------------------- */
@font-face {
  font-family: 'Gotham';
  font-weight: 100 200;
  font-style: normal;
  font-display: swap;
  src: url('fonts/GOTHAM-THIN.OTF') format('opentype');
}
@font-face {
  font-family: 'Gotham';
  /* No Regular/Medium files supplied — route 300–500 to Light */
  font-weight: 300 500;
  font-style: normal;
  font-display: swap;
  src: url('fonts/GOTHAM-LIGHT.OTF') format('opentype');
}
@font-face {
  font-family: 'Gotham';
  font-weight: 600 700;
  font-style: normal;
  font-display: swap;
  src: url('fonts/GOTHAM-BOLD.OTF') format('opentype');
}
@font-face {
  font-family: 'Gotham';
  font-weight: 800 900;
  font-style: normal;
  font-display: swap;
  src: url('fonts/GOTHAM-BLACK.OTF') format('opentype');
}

:root {
  /* ---------- Brand palette (from brand sheet, section 02) ---- */
  --jyt-chalk-white:    #F9F7F3;  /* paper / page */
  --jyt-soft-pearl:     #F1EFEB;  /* recessed surface */
  --jyt-light-greige:   #E6E1D9;  /* card / divider tint */
  --jyt-pale-ash:       #B8B5AE;  /* muted text, hairlines */
  --jyt-graphite:       #2F3133;  /* ink / primary text */
  --jyt-deep-sage:      #6F7D69;  /* accent — sparingly */

  /* Supporting tones derived for UI utility only — not in print spec */
  --jyt-ink-soft:       #4A4D4F;  /* secondary text on light */
  --jyt-sage-deep:      #586355;  /* hover for sage */
  --jyt-sage-tint:      #DDE1D7;  /* sage washed for backgrounds */
  --jyt-line:           #D9D4CB;  /* hairline divider on cream */
  --jyt-line-strong:    #B8B5AE;  /* stronger hairline */

  /* ---------- Semantic surface roles ---------------------------*/
  /* Dominantly white. A single tonal step (Soft Pearl) is the
     recessed surface. Light Greige remains available as a fuller
     warm panel when needed. */
  --surface-page:       #FFFFFF;
  --surface-raised:     #FFFFFF;
  --surface-recessed:   var(--jyt-soft-pearl);     /* #F1EFEB */
  --surface-muted:      var(--jyt-soft-pearl);
  --surface-warm:       var(--jyt-light-greige);   /* opt-in panels */
  --surface-inverse:    var(--jyt-graphite);
  --surface-accent:     var(--jyt-deep-sage);

  /* ---------- Semantic text roles -----------------------------*/
  --fg-primary:         var(--jyt-graphite);
  --fg-secondary:       var(--jyt-ink-soft);
  --fg-muted:           var(--jyt-pale-ash);
  --fg-inverse:         var(--jyt-chalk-white);
  --fg-accent:          var(--jyt-deep-sage);

  /* ---------- Border & line ----------------------------------- */
  --border-hairline:    var(--jyt-line);
  --border-strong:      var(--jyt-line-strong);
  --border-ink:         var(--jyt-graphite);

  /* ---------- Typography stack -------------------------------- */
  --font-heading:       'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --font-sans:          'Noto Sans', 'Helvetica Neue', Arial, sans-serif;
  --font-serif:         'Cormorant Garamond', 'Source Serif 4', 'Times New Roman', serif;
  --font-mono:          'JetBrains Mono', ui-monospace, Menlo, monospace;

  /* Letter-spacing — JYT leans on generous tracking for caps */
  --tracking-tight:     -0.01em;
  --tracking-normal:    0;
  --tracking-wide:      0.08em;
  --tracking-wider:     0.16em;   /* section eyebrows: "01 LOGO SYSTEM" */
  --tracking-widest:    0.28em;

  /* ---------- Type scale (px, scales fluidly via clamp) ------- */
  --fs-eyebrow:         11px;     /* tracked caps used as labels */
  --fs-caption:         12px;
  --fs-body-sm:         14px;
  --fs-body:            16px;
  --fs-body-lg:         18px;
  --fs-h6:              18px;
  --fs-h5:              22px;
  --fs-h4:              28px;
  --fs-h3:              36px;
  --fs-h2:              clamp(40px, 4.4vw, 56px);
  --fs-h1:              clamp(52px, 6.2vw, 88px);
  --fs-display:         clamp(72px, 9vw, 132px);

  /* ---------- Spacing — 4px base, 8/12/16/24/32… -------------- */
  --space-1:            4px;
  --space-2:            8px;
  --space-3:            12px;
  --space-4:            16px;
  --space-5:            24px;
  --space-6:            32px;
  --space-7:            48px;
  --space-8:            64px;
  --space-9:            96px;
  --space-10:           128px;

  /* ---------- Radii — almost everything stays SQUARE --------- */
  --radius-none:        0;
  --radius-xs:          2px;       /* form fields, tags */
  --radius-sm:          4px;       /* cards (sparingly) */
  --radius-pill:        999px;     /* avatars only */

  /* ---------- Elevation — very restrained --------------------- */
  --shadow-none:        none;
  --shadow-soft:        0 1px 2px rgba(47,49,51,0.04), 0 8px 24px rgba(47,49,51,0.06);
  --shadow-card:        0 1px 2px rgba(47,49,51,0.05), 0 16px 40px -12px rgba(47,49,51,0.10);
  --shadow-hover:       0 2px 4px rgba(47,49,51,0.06), 0 24px 56px -16px rgba(47,49,51,0.14);
  --shadow-inset:       inset 0 0 0 1px var(--border-hairline);

  /* ---------- Motion ----------------------------------------- */
  --ease-soft:          cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out:        cubic-bezier(0.6, 0, 0.4, 1);
  --dur-fast:           160ms;
  --dur-base:           240ms;
  --dur-slow:           420ms;
}

/* ===============================================================
   Semantic element styles — apply class or use as base
   =============================================================== */

html, body {
  background: var(--surface-page);
  color: var(--fg-primary);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Eyebrow — tracked caps. Pattern lifted directly from brand sheet
   ("01 LOGO SYSTEM", "02 COLOR PALETTE"…). The default look. */
.eyebrow,
.t-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--fg-primary);
}

/* Numbered eyebrow — "01" then label with hairline gap */
.eyebrow-numbered::before {
  content: attr(data-num) "  ";
  color: var(--fg-muted);
}

/* Display headline — Gotham Light, large, refined. The serif is for
   accent/editorial only — never for display. */
.t-display,
h1.display {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: var(--fs-display);
  line-height: 1.02;
  letter-spacing: -0.015em;
  color: var(--fg-primary);
}

h1, .t-h1 {
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: var(--fs-h1);
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin: 0;
}

h2, .t-h2 {
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: var(--fs-h2);
  line-height: 1.1;
  letter-spacing: -0.005em;
  margin: 0;
}

h3, .t-h3 {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: var(--fs-h3);
  line-height: 1.2;
  letter-spacing: 0;
  margin: 0;
}

h4, .t-h4 {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: var(--fs-h4);
  line-height: 1.25;
  margin: 0;
}

h5, .t-h5 {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: var(--fs-h5);
  line-height: 1.3;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  margin: 0;
}

h6, .t-h6 {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: var(--fs-h6);
  line-height: 1.4;
  margin: 0;
}

p, .t-body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--fg-secondary);
  margin: 0;
}

.t-lede {
  font-family: var(--font-serif);
  font-weight: 400;
  font-style: italic;
  font-size: var(--fs-body-lg);
  line-height: 1.55;
  color: var(--fg-secondary);
}

.t-editorial {            /* long-form body in serif */
  font-family: var(--font-serif);
  font-size: var(--fs-body-lg);
  line-height: 1.7;
  color: var(--fg-primary);
}

.t-caption {
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  line-height: 1.5;
  color: var(--fg-muted);
  letter-spacing: 0.01em;
}

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

code, .t-code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--surface-recessed);
  padding: 1px 6px;
  border-radius: var(--radius-xs);
}

a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  transition: opacity var(--dur-fast) var(--ease-soft);
}
a:hover { opacity: 0.6; }

hr {
  border: 0;
  border-top: 1px solid var(--border-hairline);
  margin: var(--space-6) 0;
}

::selection {
  background: var(--jyt-graphite);
  color: var(--jyt-chalk-white);
}