/* ==========================================================================
   Mass Tech & Media — brand tokens
   Single source of truth. Aligned 1:1 with the MTMSlab product site so the
   parent brand and the product read as one system. Import this first in
   every new product; do not redeclare these values downstream.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;1,400&family=Inter:wght@400;500&display=swap');

:root{

  /* --- Color -------------------------------------------------------------
     Stone is the ink and the dark surface. White is the page. Gold is the
     only accent — eyebrows, active states, one italic word. Gold never
     covers a large area; the pale gold tints are for badges and chips.
     ---------------------------------------------------------------------- */
  --stone:            #1A1C1F;
  --stone-mid:        #3A3D42;   /* button hover, arrows on dark */
  --stone-light:      #6B6E73;   /* secondary text on light */
  --stone-pale:       #F0EDE8;   /* tinted surface on light */
  --surface-dark:     #2A2D32;   /* card surface sitting on stone */

  --gold:             #B8892A;
  --gold-light:       #D4A84B;   /* gold on dark backgrounds */
  --gold-pale:        #FFF8EC;   /* badge / chip fill */
  --gold-border:      #F0D99A;   /* badge / chip border */
  --gold-ink:         #221904;   /* text sitting on solid gold */

  --white:            #FFFFFF;
  --off-white:        #FAFAF8;
  --border:           #E2DDD6;

  --on-dark:          #FFFFFF;
  --on-dark-mute:     #9BA0A8;   /* 6.4:1 on stone — the only mute on dark */
  --line-dark:        rgba(255,255,255,.10);
  --line-dark-soft:   rgba(255,255,255,.06);

  /* Pipeline status dots — shared with the MTMSlab app */
  --dot-lead:         #6B9FD4;
  --dot-quote:        #8BC47A;
  --dot-job:          #D4A84B;
  --dot-install:      #C47AB8;
  --dot-done:         #4BAF8C;

  /* --- Type --------------------------------------------------------------
     EB Garamond carries the voice: headlines, wordmark, numerals in stats.
     Headlines are weight 400 — 500 is for the wordmark and small serif UI.
     Inter carries everything functional: body, labels, buttons, data.
     ---------------------------------------------------------------------- */
  --serif: 'EB Garamond', Georgia, serif;
  --sans:  'Inter', system-ui, -apple-system, sans-serif;

  --h1:    clamp(34px, 5vw, 52px);
  --h2:    clamp(28px, 3.6vw, 40px);
  --h3:    15px;
  --body:  16px;
  --small: 14px;
  --label: 12px;

  --tracking-display: -.02em;   /* serif headlines and wordmark */
  --tracking-label:   .12em;    /* uppercase Inter eyebrows */

  /* --- Shape -------------------------------------------------------------
     Four radii. 6 for buttons, 8/10 for small controls and tiles,
     12 for cards and grids, 16 for panels, 20 for pills.
     Borders are 1px — the light palette needs the definition.
     ---------------------------------------------------------------------- */
  --radius-btn:   6px;
  --radius-ctrl:  8px;
  --radius-tile:  10px;
  --radius-card:  12px;
  --radius-panel: 16px;
  --radius-pill:  20px;
  --hairline:     1px;

  /* --- Rhythm ------------------------------------------------------------ */
  --max:      1100px;
  --pad:      clamp(20px, 5vw, 40px);
  --section:  clamp(64px, 9vw, 100px);
}

/* --- House rules, written down so they don't get lost --------------------

   1. The page is white. Stone sections are punctuation, not the default —
      use them to mark a shift, never two in a row.

   2. Gold is a signal, not a surface. Eyebrow, active state, one italic
      word, a rule. On dark backgrounds use --gold-light, never --gold.

   3. Headlines are serif at weight 400. Everything you click, read in bulk,
      or scan as data is Inter. Never set body copy in EB Garamond.

   4. Buttons are sentence case at 15px. The only uppercase in the system is
      the 12px tracked Inter eyebrow.

   5. The logo plate is the family signature: dark rounded square, white
      structure, gold active element. The parent brand's structure is the
      MTM lintel; each product gets its own object inside the same plate.

   6. Secondary text is --stone-light on white (5.1:1) and --on-dark-mute on
      stone (6.4:1). Nothing lighter — both are already at the AA floor.
   ------------------------------------------------------------------------ */