/* ─────────────────────────────────────────────────────────────────
   MO6 Design System — Colors & Type
   Brand: MO6 (a sub-brand of Elementic). Premium carbon wall tiles.
   Single-family typographic system: FH Oscar Pro at 3 weights.
   Source of truth: uploads/260415_MO6_Brand_Visuals_01.md +
   /MO6-Web-R5 Figma frames.
   ───────────────────────────────────────────────────────────────── */

/* ── FONT FACES ─────────────────────────────────────────────────── */
@font-face {
  font-family: "FH Oscar Pro";
  src: url("./fonts/FHOscarPro-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "FH Oscar Pro";
  src: url("./fonts/FHOscarPro-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "FH Oscar Pro";
  src: url("./fonts/FHOscarPro-SemiBold.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* ── TOKENS ─────────────────────────────────────────────────────── */
:root {
  /* Surfaces */
  --canvas:        #EDEDED;   /* warm off-white, default page floor */
  --surface-beige: #e4e0dc;   /* muted light beige; philosophy / forms */
  --surface-warm:  #f6f3f0;   /* even lighter cream observed in Figma footers/products header */
  --surface-dark:  #111111;   /* graphite, dark statement bands + footer */

  /* Ink + on-dark */
  --ink:           #111111;   /* warm-true black, primary text on light */
  --ink-soft:      rgba(17,17,17,0.65);
  --ink-hairline:  rgba(17,17,17,0.15);
  --on-dark:       #ededed;   /* off-white type on graphite */
  --on-dark-soft:  #e4e0dc;   /* beige type on graphite (footer wordmark / © line) */

  /* Accent */
  --accent:        #aea695;   /* greige, near-tonal type on beige */

  /* Semantic — not in brand book; conservative tonal additions */
  --status-default: #111111;
  --status-active:  #111111;
  --hairline:       rgba(17,17,17,0.15);

  /* Type family */
  --font-sans: "FH Oscar Pro", "Inter", -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Weight roles */
  --w-body:    300;   /* Light — body, descriptive paragraphs, lead text */
  --w-display: 400;   /* Regular — all display + editorial headlines */
  --w-label:   600;   /* Semi Bold — caps spec / button / nav only */

  /* Type scale (px). Aligned to Figma observations + brand book.
     Display weight stays 400. Body weight stays 300. Caps stays 600. */
  --t-display-xl: 64px;   /* hero h1 */
  --t-display-lg: 48px;   /* major section heads */
  --t-display-md: 36px;   /* sub-sections, statement bands, pillar names */
  --t-display-sm: 28px;   /* lead-in callouts, "CARBON WALL TILES" h-row */
  --t-title-md:   18px;   /* card titles, intro lead, claim items */
  --t-body-md:    16px;   /* default running text */
  --t-body-sm:    14px;   /* footer body, fine print, address blocks */
  --t-label:      12px;   /* caps label, button, nav; +tracking */
  --t-numeral:    96px;   /* pillar numerals 1/2/3/4 */

  /* Line heights */
  --lh-display:   1.10;
  --lh-display-tight: 1.05;
  --lh-title:     1.40;
  --lh-body:      1.55;
  --lh-label:     1.40;

  /* Letter spacing — display goes negative, caps go positive */
  --tr-display-xl: -1px;
  --tr-display-lg: -0.5px;
  --tr-display-md: -0.3px;
  --tr-display-sm: -0.2px;
  --tr-body:        0;
  --tr-label:      0.12em;   /* caps spec/button track */
  --tr-button:     0.16em;   /* hero button track is wider in Figma */

  /* Spacing — 8pt grid */
  --s-xxs: 4px;
  --s-xs:  8px;
  --s-sm:  12px;
  --s-md:  16px;
  --s-lg:  24px;
  --s-xl:  40px;
  --s-xxl: 64px;
  --s-section: 120px;

  /* Radii */
  --r-none: 0px;
  --r-xs:   2px;
  --r-sm:   4px;
  --r-md:   8px;
  --r-full: 9999px;

  /* Layout */
  --content-max: 1280px;

  /* Motion (inferred — slow, restrained) */
  --ease-quiet: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:   180ms;
  --dur-slow:   420ms;
}

/* ── BASE / SEMANTIC ROLES ──────────────────────────────────────── */
html, body {
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-sans);
  font-weight: var(--w-body);
  font-size: var(--t-body-md);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Display headlines — Regular only, never Semi Bold */
h1, .h1, .display-xl {
  font-family: var(--font-sans);
  font-weight: var(--w-display);
  font-size: var(--t-display-xl);
  line-height: var(--lh-display-tight);
  letter-spacing: var(--tr-display-xl);
  color: var(--ink);
  margin: 0;
}
h2, .h2, .display-lg {
  font-family: var(--font-sans);
  font-weight: var(--w-display);
  font-size: var(--t-display-lg);
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display-lg);
  color: var(--ink);
  margin: 0;
}
h3, .h3, .display-md {
  font-family: var(--font-sans);
  font-weight: var(--w-display);
  font-size: var(--t-display-md);
  line-height: 1.22;
  letter-spacing: var(--tr-display-md);
  color: var(--ink);
  margin: 0;
}
h4, .h4, .display-sm {
  font-family: var(--font-sans);
  font-weight: var(--w-display);
  font-size: var(--t-display-sm);
  line-height: 1.20;
  letter-spacing: var(--tr-display-sm);
  color: var(--ink);
  margin: 0;
}

.title-md {
  font-weight: var(--w-display);
  font-size: var(--t-title-md);
  line-height: var(--lh-title);
  color: var(--ink);
}

p, .body-md {
  font-weight: var(--w-body);
  font-size: var(--t-body-md);
  line-height: var(--lh-body);
  color: var(--ink);
  text-wrap: pretty;
  margin: 0;
}
.body-sm {
  font-weight: var(--w-body);
  font-size: var(--t-body-sm);
  line-height: var(--lh-body);
  color: var(--ink);
}

/* Caps register — the only place Semi Bold lives */
.label, .label-uppercase {
  font-weight: var(--w-label);
  font-size: var(--t-label);
  line-height: var(--lh-label);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--ink);
}

.numeral {
  font-weight: var(--w-display);
  font-size: var(--t-numeral);
  line-height: 1;
  letter-spacing: 0;
  color: var(--ink);
}

/* On-dark inversion — mirrors the canvas tone, not pure white */
.on-dark, .on-dark p, .on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4,
.on-dark .label, .on-dark .body-md, .on-dark .body-sm {
  color: var(--on-dark);
}

/* Surfaces */
.surface-canvas { background: var(--canvas); color: var(--ink); }
.surface-beige  { background: var(--surface-beige); color: var(--ink); }
.surface-warm   { background: var(--surface-warm);  color: var(--ink); }
.surface-dark   { background: var(--surface-dark);  color: var(--on-dark); }

/* Buttons — square-cornered, Semi-Bold caps, tracked */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-xs);
  height: 44px;
  padding: 0 var(--s-lg);
  font-family: var(--font-sans);
  font-weight: var(--w-label);
  font-size: var(--t-label);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  cursor: pointer;
  user-select: none;
  transition: background var(--dur-fast) var(--ease-quiet),
              color var(--dur-fast) var(--ease-quiet),
              border-color var(--dur-fast) var(--ease-quiet);
  text-decoration: none;
}
.btn-primary {
  background: var(--ink);
  color: var(--on-dark);
  border-color: var(--ink);
}
.btn-primary:hover { background: #000; }
.btn-secondary {
  background: var(--canvas);
  color: var(--ink);
  border-color: var(--ink);
}
.btn-secondary:hover { background: var(--ink); color: var(--on-dark); }
.btn-on-dark {
  background: var(--canvas);
  color: var(--ink);
  border-color: var(--canvas);
}
.btn-text-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-weight: var(--w-display);
  font-size: var(--t-title-md);
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 4px;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.btn-text-link::after {
  content: "→";
  text-decoration: none;
  font-weight: var(--w-display);
}

/* Inputs — surface-beige fill, no border in default */
.input, .textarea {
  width: 100%;
  background: var(--surface-beige);
  color: var(--ink);
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  padding: 14px 16px;
  height: 48px;
  font-family: var(--font-sans);
  font-weight: var(--w-body);
  font-size: var(--t-body-md);
  outline: none;
  transition: border-color var(--dur-fast) var(--ease-quiet);
}
.textarea { height: auto; min-height: 144px; resize: vertical; }
.input::placeholder, .textarea::placeholder {
  font-weight: var(--w-label);
  font-size: var(--t-label);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0.55;
}
.input:focus, .textarea:focus { border-color: var(--ink); }

/* Hairline rule */
.hr {
  height: 1px;
  background: var(--ink-hairline);
  border: 0;
  width: 100%;
}

/* Container */
.container {
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--s-xl);
}