/* ============================================================================
   Bombay 3D Studio — design system (JPD-40)
   Tokens + primitives + components. Loaded BEFORE style.css on every page.

   Rules this file encodes (see /DESIGN-SYSTEM.md for the reasoning):
   1. Blueprint grid is a CONTAINED surface (.sheet), never a page background
      behind body copy — that was costing legibility for zero brand gain.
   2. Mono type is reserved for measurements, specs and IDs. Never for prices,
      headings or body copy. This is what makes the technical direction read as
      intentional instead of decorative.
   3. Blueprint = structure and technical marks. Brass = money and action.
      Two accents, two jobs, no overlap.
   4. Nothing interactive is smaller than --tap (44px) at any width.
   5. Every focusable thing gets the same visible ring. Not a cleanup task.
   ========================================================================== */

:root {
  /* ---- Colour: surfaces --------------------------------------------------- */
  --paper:        #f6f3ec;   /* page */
  --surface:      #ffffff;   /* cards, panels */
  --surface-sunk: #efeadf;   /* wells, thumbnails, inactive */
  --ink-surface:  #1b2129;   /* inverted band */

  /* ---- Colour: text ------------------------------------------------------- */
  --ink:        #14181f;     /* body + headings          on paper 14.8:1 */
  --ink-muted:  #5d5952;     /* secondary copy           on paper  6.1:1 */
  --ink-faint:  #857f75;     /* captions, meta           on paper  3.6:1 — large only */
  --ink-invert: #f6f3ec;

  /* ---- Colour: accents ---------------------------------------------------- */
  --blueprint:      #2b4c6f; /* structure, ticks, specs  on paper  8.4:1 */
  --blueprint-soft: #7f97ae;
  --brass:          #b8823d; /* fills: buttons, badges */
  --brass-ink:      #7d5620; /* brass as TEXT            on paper  5.2:1 */
  --brass-wash:     #f3e7d3;

  /* ---- Colour: state ------------------------------------------------------ */
  --error:      #a8221b;
  --error-wash: #fbeceb;
  --ok:         #1b6e34;
  --ok-wash:    #d7f5df;
  --warn-ink:   #7a5d10;
  --warn-wash:  #fdf3d4;

  --line:        #ddd6c6;    /* hairlines */
  --line-strong: #c3b9a3;

  /* ---- Type -------------------------------------------------------------- */
  --font-display: "Space Grotesk", system-ui, sans-serif;
  --font-body:    "Inter", system-ui, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, monospace;

  /* Fluid scale, 390px → 1280px. Ratio ~1.22 mobile / ~1.25 desktop. */
  --t-hero:  clamp(1.85rem, 1.2rem + 3.4vw, 3.5rem);
  --t-h1:    clamp(1.7rem,  1.25rem + 2.1vw, 2.5rem);
  --t-h2:    clamp(1.35rem, 1.1rem  + 1.1vw, 1.85rem);
  --t-h3:    clamp(1.05rem, 0.98rem + 0.35vw, 1.2rem);
  --t-body:  1rem;
  --t-sm:    0.9rem;
  --t-xs:    0.8rem;
  --t-mono:  0.76rem;

  --lh-tight: 1.12;
  --lh-snug:  1.3;
  --lh-body:  1.6;

  --tracking-tight: -0.02em;
  --tracking-label:  0.09em;

  /* ---- Space: 4px base --------------------------------------------------- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;

  /* Section rhythm shrinks on mobile so the catalogue reaches the fold. */
  --section-y: clamp(36px, 5vw, 72px);

  /* ---- Structure --------------------------------------------------------- */
  --container: 1120px;
  --gutter: clamp(16px, 4vw, 32px);
  --measure: 34em;          /* max body-copy line length */

  --radius:    12px;
  --radius-sm:  8px;
  --radius-lg: 18px;
  --radius-pill: 999px;

  --tap: 44px;              /* minimum interactive size */

  --shadow-sm: 0 1px 2px rgba(20, 24, 31, 0.06);
  --shadow:    0 2px 8px rgba(20, 24, 31, 0.07);
  --shadow-lg: 0 12px 32px rgba(20, 24, 31, 0.12);

  --grid-mm: 28px;          /* blueprint grid pitch */
  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* ============================================================================
   Base
   ========================================================================== */

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

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

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .display {
  font-family: var(--font-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--s-3);
  text-wrap: balance;
}
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); line-height: var(--lh-snug); }

p { margin: 0 0 var(--s-3); }
p:last-child { margin-bottom: 0; }

/* Mono is for measurements, specs and IDs only. */
.mono, .spec-line, code, .order-id, .dim-label {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: 0.01em;
}

img, picture, canvas, svg { max-width: 100%; }

/* ---- Focus: one ring, everywhere --------------------------------------- */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--blueprint);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ============================================================================
   Layout primitives
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); }

.stack > * + * { margin-top: var(--s-3); }
.stack-lg > * + * { margin-top: var(--s-5); }

.measure { max-width: var(--measure); }

/* ---- .sheet: the contained blueprint surface --------------------------- */
/* Registration ticks + grid live HERE, on a bounded panel, not behind copy. */
.sheet {
  position: relative;
  background-color: var(--surface);
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: var(--grid-mm) var(--grid-mm);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.sheet--sunk { background-color: var(--surface-sunk); }

/* Corner registration marks — the studio's signature, used on sheets only. */
.sheet::before, .sheet::after {
  content: "";
  position: absolute;
  width: 15px; height: 15px;
  border: 1.5px solid var(--blueprint);
  opacity: 0.5;
  pointer-events: none;
}
.sheet::before { top: 10px; left: 10px;  border-width: 1.5px 0 0 1.5px; border-radius: 3px 0 0 0; }
.sheet::after  { top: 10px; right: 10px; border-width: 1.5px 1.5px 0 0; border-radius: 0 3px 0 0; }

/* ============================================================================
   Components
   ========================================================================== */

/* ---- Eyebrow label ----------------------------------------------------- */
.eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--blueprint);
  margin-bottom: var(--s-2);
}

/* ---- Buttons ----------------------------------------------------------- */
a.btn, button.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: var(--tap);
  padding: var(--s-3) var(--s-5);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: var(--brass);
  color: #1a1206;
  font-family: var(--font-body);
  font-size: var(--t-body);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.12s var(--ease), background-color 0.12s var(--ease);
}
a.btn:hover, button.btn:hover:not(:disabled) { background: #a67231; }
a.btn:active, button.btn:active:not(:disabled) { transform: translateY(1px); }

a.btn.secondary, button.btn.secondary {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-strong);
  font-weight: 500;
}
a.btn.secondary:hover, button.btn.secondary:hover:not(:disabled) {
  background: var(--surface);
  border-color: var(--blueprint);
}

a.btn.on-ink, button.btn.on-ink {
  background: transparent;
  color: var(--ink-invert);
  border-color: rgba(246, 243, 236, 0.4);
}
a.btn.on-ink:hover { background: rgba(246, 243, 236, 0.1); border-color: var(--ink-invert); }

button.btn:disabled { opacity: 0.45; cursor: not-allowed; }

.btn-block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-3); }

/* ---- Pills / badges ---------------------------------------------------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-size: var(--t-xs);
  font-weight: 600;
  line-height: 1.5;
  background: var(--surface-sunk);
  color: var(--ink-muted);
}
.pill--blueprint { background: var(--blueprint); color: var(--ink-invert); }
.pill--brass     { background: var(--brass-wash); color: var(--brass-ink); }
.pill--ok        { background: var(--ok-wash);   color: var(--ok); }
.pill--pending   { background: var(--warn-wash); color: var(--warn-ink); }

/* ---- Card -------------------------------------------------------------- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--s-4);
}

/* ---- Price ------------------------------------------------------------- */
/* Body font, not mono: a price is money, not a measurement. */
.price {
  font-family: var(--font-body);
  font-weight: 700;
  color: var(--brass-ink);
  letter-spacing: -0.01em;
}
.price--lg { font-size: 1.35rem; }
.price .price-note {
  display: block;
  font-size: var(--t-xs);
  font-weight: 500;
  color: var(--ink-muted);
  letter-spacing: 0;
}

/* ---- Spec line --------------------------------------------------------- */
.spec-line { color: var(--blueprint); margin: 0; }

/* ---- Form fields ------------------------------------------------------- */
label { display: block; font-size: var(--t-sm); font-weight: 500; color: var(--ink); margin-bottom: var(--s-1); }
.label-hint { display: block; font-size: var(--t-xs); font-weight: 400; color: var(--ink-muted); }

input[type=text], input[type=email], input[type=tel], input[type=number], select, textarea {
  width: 100%;
  min-height: var(--tap);
  padding: var(--s-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  font-family: inherit;
  font-size: var(--t-body);
  margin-bottom: var(--s-3);
}
input:focus, select:focus, textarea:focus { border-color: var(--blueprint); }
input::placeholder { color: var(--ink-faint); }

fieldset {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--s-4);
  margin: 0 0 var(--s-4);
  background: var(--surface);
}
legend {
  padding: 0 var(--s-2);
  font-family: var(--font-display);
  font-size: var(--t-sm);
  font-weight: 600;
}

.note { color: var(--ink-muted); font-size: var(--t-xs); line-height: 1.5; }
.error-msg { color: var(--error); font-size: var(--t-sm); min-height: 1.2em; }

/* ---- Trust strip: hard facts, evenly weighted -------------------------- */
.trust-strip {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.trust-strip > div {
  background: var(--surface);
  padding: var(--s-4);
}
.trust-strip dt {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--blueprint);
  margin-bottom: var(--s-1);
}
.trust-strip dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--t-h3);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
}
.trust-strip .trust-sub { display: block; font-family: var(--font-body); font-size: var(--t-xs); font-weight: 400; color: var(--ink-muted); letter-spacing: 0; margin-top: 2px; }
@media (min-width: 760px) { .trust-strip { grid-template-columns: repeat(4, 1fr); } }

/* ---- Inverted band (bulk enquiry) ------------------------------------- */
.band-ink {
  background: var(--ink-surface);
  color: var(--ink-invert);
  border-radius: var(--radius-lg);
  padding: var(--s-6) var(--s-5);
}
.band-ink h2 { color: var(--ink-invert); }
.band-ink .eyebrow { color: var(--blueprint-soft); }
.band-ink p { color: #d6d1c7; }
.band-ink a:not(.btn) { color: var(--ink-invert); }

/* ---- Visually hidden --------------------------------------------------- */
.vh {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}