/* ==========================================================================
   KC Ironcore — brand.css
   Owns: the --ic-* design tokens, fonts, and a small set of brand utilities.
   Layout classes (.wrap, .section, .btn, .card, .grid-*, .eyebrow, .headline,
   .lede) live in public/style.css (scaffold). Templates use var(--ic-*) only.
   See BRAND.md for the full system.
   ========================================================================== */

/* --- Fonts ---------------------------------------------------------------- */
/* Google Fonts @import (self-hosted woff2 would live in public/fonts/, which is
   outside the brand lane — so we import. Scaffold may later swap to self-hosted
   without changing the --ic-font-* vars below). */
@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@500;600;700&family=Inter:wght@400;500;600&display=swap");

/* --- Tokens --------------------------------------------------------------- */
:root {
  /* Color — dark-first surfaces */
  --ic-bg:            #0E0F11;   /* Forge Black */
  --ic-bg-elev:       #17191C;   /* Diamond Plate */
  --ic-bg-elev-2:     #202327;   /* Anvil */

  /* Color — ink */
  --ic-ink:           #F2F3F4;   /* Mill Finish */
  --ic-ink-dim:       #9BA1A8;   /* Brushed Grey */

  /* Color — steel */
  --ic-steel:         #5C636C;   /* Steel */
  --ic-steel-light:   #C7CCD1;   /* Galvanized */

  /* Color — accents */
  --ic-spark:         #FF5A1F;   /* Spark Orange — THE accent */
  --ic-spark-dim:     #C6431A;   /* Ember — pressed/hover */
  --ic-weld:          #3FB6C9;   /* Weld Blue — heat tint, sparing secondary */
  --ic-rust:          #8A4B2A;   /* Rust — tertiary warm, detail only */

  /* Color — lines & state */
  --ic-line:          rgba(255, 255, 255, 0.10);
  --ic-line-strong:   rgba(255, 255, 255, 0.18);
  --ic-good:          #5FBF7A;   /* Pass */
  --ic-bad:           #E3534A;   /* Reject */

  /* Logo accent override hook (SVGs read this; defaults to --ic-spark) */
  --logo-spark:       var(--ic-spark);

  /* Typography */
  --ic-font-display:  "Oswald", "Arial Narrow", system-ui, sans-serif;
  --ic-font-body:     "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --ic-font-mono:     ui-monospace, "IBM Plex Mono", SFMono-Regular, Menlo, Consolas, monospace;

  /* Type scale — 1.250 (major third), 18px base */
  --ic-fs-xs:    0.722rem;  /* ~13px  */
  --ic-fs-sm:    0.8rem;    /* ~14.4  */
  --ic-fs-base:  1rem;      /* 18px (set on :root font-size below) */
  --ic-fs-md:    1.25rem;   /* ~22.5  */
  --ic-fs-lg:    1.563rem;  /* ~28    */
  --ic-fs-xl:    1.953rem;  /* ~35    */
  --ic-fs-2xl:   2.441rem;  /* ~44    */
  --ic-fs-3xl:   3.052rem;  /* ~55    */
  --ic-fs-4xl:   3.815rem;  /* ~69    */
  --ic-fs-5xl:   4.768rem;  /* ~86    */

  /* Fluid headline sizes (mobile ~62–68% of desktop) */
  --ic-h1:  clamp(2.1rem, 1.3rem + 4.2vw, 3.052rem);
  --ic-h2:  clamp(1.75rem, 1.2rem + 2.6vw, 2.441rem);
  --ic-h3:  clamp(1.4rem, 1.1rem + 1.6vw, 1.953rem);
  --ic-h4:  clamp(1.2rem, 1rem + 0.9vw, 1.563rem);
  --ic-hero: clamp(2.4rem, 1.2rem + 6.2vw, 4.768rem);
  --ic-lede: clamp(1.1rem, 1rem + 0.7vw, 1.25rem);

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

  --ic-section-y:  clamp(48px, 9vw, 128px);
  --ic-gutter:     clamp(20px, 5vw, 48px);
  --ic-maxw:       1200px;
  --ic-maxw-prose: 68ch;

  /* Radius — square-ish; steel has edges */
  --ic-radius:      4px;
  --ic-radius-sm:   2px;
  --ic-radius-lg:   8px;
  --ic-radius-pill: 999px;

  /* Shadow — low, hard, dark; one light source */
  --ic-shadow:     0 1px 0 rgba(255,255,255,0.04) inset, 0 8px 24px rgba(0,0,0,0.45);
  --ic-shadow-sm:  0 1px 0 rgba(255,255,255,0.04) inset, 0 2px 8px rgba(0,0,0,0.40);
  --ic-shadow-lg:  0 1px 0 rgba(255,255,255,0.05) inset, 0 24px 60px rgba(0,0,0,0.55);
  --ic-glow-spark: 0 0 0 1px rgba(255,90,31,0.35), 0 0 24px rgba(255,90,31,0.25);
  --ic-focus-ring: 0 0 0 3px rgba(255,90,31,0.45);

  /* Motion */
  --ic-ease:      cubic-bezier(0.2, 0.7, 0.2, 1);
  --ic-dur:       180ms;
  --ic-dur-slow:  420ms;

  /* Texture asset paths (1–2 KB SVGs in public/img/textures/) */
  --ic-tex-brushed: url("/img/textures/brushed-steel.svg");
  --ic-tex-plate:   url("/img/textures/diamond-plate.svg");
  --ic-tex-grain:   url("/img/textures/grain.svg");

  font-size: 18px;
  color-scheme: dark;
}

@media (max-width: 600px) {
  :root { font-size: 17px; }
}

/* --- Light surface variant ----------------------------------------------- */
/* Opt a <body> or a section into the light theme: data-surface="light" */
[data-surface="light"] {
  --ic-bg:          #F4F5F6;
  --ic-bg-elev:     #FFFFFF;
  --ic-bg-elev-2:   #ECEEF0;
  --ic-ink:         #1A1C1F;
  --ic-ink-dim:     #5C636C;
  --ic-steel:       #5C636C;
  --ic-steel-light: #8A9097;
  --ic-line:        rgba(0, 0, 0, 0.12);
  --ic-line-strong: rgba(0, 0, 0, 0.20);
  --ic-shadow:      0 1px 0 rgba(255,255,255,0.6) inset, 0 8px 24px rgba(0,0,0,0.10);
  --ic-shadow-sm:   0 1px 0 rgba(255,255,255,0.6) inset, 0 2px 8px rgba(0,0,0,0.08);
  --ic-shadow-lg:   0 1px 0 rgba(255,255,255,0.6) inset, 0 24px 60px rgba(0,0,0,0.15);
  --ic-focus-ring:  0 0 0 3px rgba(255,90,31,0.40);
  color-scheme: light;
}

/* --- Base hooks ----------------------------------------------------------- */
/* Minimal — scaffold's style.css owns the real reset/layout. These just make
   the tokens visible if brand.css is loaded standalone (e.g. a brand preview). */
body {
  background-color: var(--ic-bg);
  color: var(--ic-ink);
  font-family: var(--ic-font-body);
  font-size: var(--ic-fs-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--ic-spark); color: #10110D; }

:where(a):focus-visible,
:where(button):focus-visible,
:where(input, textarea, select):focus-visible {
  outline: none;
  box-shadow: var(--ic-focus-ring);
  border-radius: var(--ic-radius-sm);
}

/* --- Brand utility classes ----------------------------------------------- */
.u-display   { font-family: var(--ic-font-display); font-weight: 600; letter-spacing: -0.01em; line-height: 1.1; }
.u-mono      { font-family: var(--ic-font-mono); font-size: 0.92em; }
.u-spark     { color: var(--ic-spark); }
.u-weld      { color: var(--ic-weld); }
.u-rust      { color: var(--ic-rust); }
.u-dim       { color: var(--ic-ink-dim); }

.u-eyebrow {
  display: inline-block;
  font-family: var(--ic-font-display);
  font-weight: 600;
  font-size: var(--ic-fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ic-spark);
}
.u-eyebrow--dim { color: var(--ic-ink-dim); }

/* The 1px "weld line" rule — sits under an eyebrow/headline */
.u-weld-line {
  border: 0;
  height: 1px;
  width: 56px;
  margin: var(--ic-sp-4) 0;
  background: linear-gradient(90deg, var(--ic-spark), var(--ic-spark-dim));
}
.u-weld-line--full { width: 100%; background: var(--ic-line); }

/* Diamond-plate strip background (footer / divider bands) */
.u-plate {
  background-color: var(--ic-bg-elev);
  background-image: var(--ic-tex-plate);
  background-size: 28px 28px;
  background-repeat: repeat;
}

/* Site-wide grain overlay — drop on a fixed pseudo or a wrapping element */
.u-grain { position: relative; }
.u-grain::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: var(--ic-tex-grain);
  background-size: 180px 180px;
  opacity: 0.045;
  mix-blend-mode: overlay;
}
@media (prefers-reduced-motion: no-preference) {} /* (grain is static; no motion) */

/* Brushed-steel body background helper */
.u-brushed {
  background-color: var(--ic-bg);
  background-image: var(--ic-tex-brushed);
  background-size: cover;
  background-attachment: fixed;
}

/* Spark glow box-shadow helper (use sparingly — the arc moment) */
.u-glow { box-shadow: var(--ic-glow-spark); }

/* Optional "tack weld" corner accent for feature cards: add .u-tack to a
   positioned element; pseudo draws a small spark L-bracket top-left. */
.u-tack { position: relative; }
.u-tack::before {
  content: "";
  position: absolute;
  top: -1px; left: -1px;
  width: 12px; height: 12px;
  border-top: 2px solid var(--ic-spark);
  border-left: 2px solid var(--ic-spark);
  border-top-left-radius: var(--ic-radius);
}

/* Inline logo SVG helper — set color (drives currentColor) + a size */
.logo { color: var(--ic-ink); display: inline-block; line-height: 0; }
.logo svg { display: block; height: 100%; width: auto; }
.logo--sm  { height: 24px; }
.logo--md  { height: 34px; }
.logo--lg  { height: 48px; }
.logo--xl  { height: 96px; }
.logo--ink   { color: var(--ic-ink); }
.logo--steel { color: var(--ic-steel-light); }
.logo--dark  { color: #10110D; }      /* for use on a spark/light field */
.logo--mono  { color: currentColor; } /* inherit from parent */

/* Small status pill (e.g. "Rust & Restore — coming soon") */
.u-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--ic-sp-2);
  font-family: var(--ic-font-body);
  font-size: var(--ic-fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 4px 10px;
  border: 1px solid var(--ic-line-strong);
  border-radius: var(--ic-radius-pill);
  color: var(--ic-ink-dim);
  background: var(--ic-bg-elev-2);
}
.u-pill::before {
  content: "";
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ic-spark);
}
.u-pill--rust::before { background: var(--ic-rust); }
.u-pill--weld::before { background: var(--ic-weld); }

/* Reduced motion: kill transitions/animation globally if a consumer adds them */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}