/*
 * Tex's Prints - Design Token Foundation
 * Direction: warm paper surface, blueprint-technical structure
 *
 * Rule of the system: warm carries the surface, technical carries the structure.
 * Serif and paper tones do everything a human reads (nav, headlines, prices, copy).
 * Mono and the blueprint grid appear ONLY where there is real technical data to
 * justify them (SKUs, specs, layer height, material, print time, the quote readout).
 * Mono on a "Shop" link is costume. Mono on "LAYER_H 0.20mm" is honest labeling.
 *
 * Conventions: no em dashes anywhere. Hex stored lowercase. One accent only.
 */

:root {

  /* -------------------------------------------------------------------------
   * COLOR - paper tones (the warm surface)
   * ---------------------------------------------------------------------- */
  --paper:            #f4ede1;  /* page background, the base cream */
  --paper-card:       #fbf6ec;  /* raised cards, slightly warmer/lighter */
  --paper-inset:      #efe4d2;  /* sunken panels, the model-viewer well */
  --paper-line:       #e0d4c0;  /* dividers, card borders on paper */
  --paper-line-soft:  #e8ddc9;  /* lighter divider, card borders on card */

  /* -------------------------------------------------------------------------
   * COLOR - ink tones (text)
   * ---------------------------------------------------------------------- */
  --ink:        #3a2e22;  /* primary text, dark buttons, espresso */
  --ink-soft:   #5a4d3c;  /* secondary body text, spec values */
  --ink-muted:  #7a6a54;  /* nav links, supporting copy */
  --ink-label:  #9a8a6f;  /* mono labels, SKUs, the tan technical voice */

  /* -------------------------------------------------------------------------
   * COLOR - accent (burnt sienna, the single accent)
   * Use sparingly: the model itself, prices, the quote CTA, key links.
   * If everything is accent, nothing is.
   * ---------------------------------------------------------------------- */
  --accent:        #b5683a;  /* burnt sienna, the one accent */
  --accent-deep:   #a85b32;  /* pressed/hover state of accent */
  --accent-tint:   #c9905f;  /* lighter sienna, model fills, soft fills */
  --accent-pale:   #d8a06d;  /* lightest sienna, top-face highlights */

  /* -------------------------------------------------------------------------
   * COLOR - blueprint grid (the technical texture)
   * Barely there. Reads as drafting paper, never as a spreadsheet.
   * Applied behind model viewers and technical panels only.
   * ---------------------------------------------------------------------- */
  --grid-line: #e3d6bf;

  /* -------------------------------------------------------------------------
   * COLOR - semantic (use the same warm family, do not import cold UI colors)
   * ---------------------------------------------------------------------- */
  --ok:    #639922;  /* in stock, success, kept warm-green not neon */
  --warn:  #ba7517;  /* low stock, made-to-order lead time */
  --stop:  #a32d2d;  /* errors, out of stock, upload rejected */

  /* -------------------------------------------------------------------------
   * TYPE - two families only
   * Serif = the warm voice. Mono = the data voice. No sans in the middle.
   * Fraunces: characterful serif with optical sizing, reads handmade not corporate.
   * JetBrains Mono: the data voice, already a house font from your other work.
   * ---------------------------------------------------------------------- */
  --font-serif: "Fraunces", "Newsreader", Georgia, serif;
  --font-mono:  "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace;

  /* type scale - serif (human-facing) */
  --t-hero:     30px;  /* hero headline */
  --t-title:    22px;  /* product name, section headline */
  --t-sub:      15px;  /* subhead, lead copy */
  --t-body:     15px;  /* body copy */
  --t-price:    26px;  /* the price, always serif, always accent */

  /* type scale - mono (technical, all smaller and tracked out) */
  --t-spec:     11px;  /* spec rows, SKU, system labels */
  --t-spec-sm:  10px;  /* eyebrow tags, viewer captions */

  /* tracking - mono labels get letter-spacing, serif does not */
  --track-eyebrow: 3px;   /* EST. HOUSTON TX */
  --track-label:   2px;   /* // HOUSTON TX, section tags */
  --track-spec:    1px;   /* spec rows, button labels */

  /* line-height */
  --lh-tight:  1.18;  /* headlines */
  --lh-body:   1.65;  /* copy */
  --lh-spec:   2.1;   /* spec rows, airy on purpose */

  /* -------------------------------------------------------------------------
   * SPACING - rem for vertical rhythm, px for component-internal gaps
   * ---------------------------------------------------------------------- */
  --space-xs:   8px;
  --space-sm:   12px;
  --space-md:   16px;
  --space-lg:   24px;
  --space-xl:   34px;

  /* -------------------------------------------------------------------------
   * SHAPE
   * ---------------------------------------------------------------------- */
  --radius:      6px;   /* buttons, spec blocks, most elements */
  --radius-card: 10px;  /* product cards, larger surfaces */
  --border:      1px solid var(--paper-line);
  --border-soft: 1px solid var(--paper-line-soft);

  /* the blueprint grid as a ready-to-use background */
  --blueprint:
    linear-gradient(var(--grid-line) 0.5px, transparent 0.5px),
    linear-gradient(90deg, var(--grid-line) 0.5px, transparent 0.5px);
  --blueprint-size: 26px 26px;
}

/* ===========================================================================
 * COMPONENT PATTERNS
 * Reference implementations. Lift these into the child theme as needed.
 * ======================================================================== */

/* page base ----------------------------------------------------------------*/
.txp-page {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-serif);
}

/* the wordmark + locality lockup ------------------------------------------*/
.txp-wordmark {
  font-family: var(--font-serif);
  font-size: var(--t-title);
  font-weight: 500;
  color: var(--ink);
}
.txp-locality {            /* the // HOUSTON TX mono tag beside the wordmark */
  font-family: var(--font-mono);
  font-size: var(--t-spec-sm);
  letter-spacing: var(--track-label);
  color: var(--ink-label);
}

/* nav links - warm, serif, never mono ------------------------------------*/
.txp-nav a {
  font-family: var(--font-serif);
  font-size: 13px;
  color: var(--ink-muted);
  text-decoration: none;
}
.txp-nav a:hover { color: var(--ink); }

/* the quote CTA - the one place mono meets the accent --------------------*/
.txp-btn-quote {
  font-family: var(--font-mono);
  font-size: var(--t-spec);
  letter-spacing: var(--track-spec);
  background: var(--accent);
  color: var(--paper);
  padding: 6px 12px;
  border-radius: var(--radius);
  border: none;
  cursor: pointer;
}
.txp-btn-quote:hover { background: var(--accent-deep); }

/* primary action button - espresso, the workhorse ------------------------*/
.txp-btn-primary {
  font-family: var(--font-mono);
  font-size: var(--t-spec);
  letter-spacing: var(--track-spec);
  background: var(--ink);
  color: var(--paper);
  padding: 11px 18px;
  border-radius: var(--radius);
  border: none;
  cursor: pointer;
}

/* secondary action - serif, outlined, the warm path ----------------------*/
.txp-btn-secondary {
  font-family: var(--font-serif);
  font-size: var(--t-body);
  background: transparent;
  color: var(--ink);
  padding: 11px 20px;
  border-radius: var(--radius);
  border: 1px solid #c9b79a;
  cursor: pointer;
}

/* eyebrow - the mono kicker above a headline -----------------------------*/
.txp-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-spec-sm);
  letter-spacing: var(--track-eyebrow);
  color: var(--ink-label);
}

/* hero headline - serif, warm, the brand voice ---------------------------*/
.txp-hero {
  font-family: var(--font-serif);
  font-size: var(--t-hero);
  font-weight: 500;
  line-height: var(--lh-tight);
  letter-spacing: -0.3px;
  color: var(--ink);
}

/* product card -----------------------------------------------------------*/
.txp-card {
  background: var(--paper-card);
  border: var(--border-soft);
  border-radius: var(--radius-card);
  padding: var(--space-md);
}
.txp-card-name {           /* product name, serif */
  font-family: var(--font-serif);
  font-size: var(--t-title);
  color: var(--ink);
}
.txp-card-sku {            /* the SKU beneath, mono, the technical signature */
  font-family: var(--font-mono);
  font-size: var(--t-spec);
  color: var(--ink-label);
}
.txp-card-price {          /* price, serif, accent */
  font-family: var(--font-serif);
  font-size: var(--t-price);
  font-weight: 500;
  color: var(--accent);
}

/* the spec block - the through-line between catalog and quote tool -------*/
/* This same treatment appears on product pages AND in the quote readout,  */
/* which is what makes the upload flow feel native instead of bolted on.   */
.txp-spec {
  font-family: var(--font-mono);
  font-size: var(--t-spec);
  line-height: var(--lh-spec);
  color: var(--ink-soft);
  border-top: var(--border);
  border-bottom: var(--border);
  padding: var(--space-sm) 0;
}
.txp-spec-row {
  display: flex;
  justify-content: space-between;
}
.txp-spec-key   { color: var(--ink-label); }   /* MATERIAL, LAYER_H, INFILL */
.txp-spec-value { color: var(--ink-soft); }    /* PETG / PLA, 0.20mm, 15% */

/* the model-viewer well - inset paper + blueprint grid -------------------*/
.txp-viewer {
  background: var(--paper-inset);
  background-image: var(--blueprint);
  background-size: var(--blueprint-size);
  border-radius: var(--radius-card);
  position: relative;
}
.txp-viewer-tag {          /* [ HEX_PLANTER.GLB ] mono caption */
  font-family: var(--font-mono);
  font-size: var(--t-spec-sm);
  letter-spacing: var(--track-spec);
  color: var(--ink-label);
}