/* ============================================================
   gMountie Design System — colors_and_type.css
   ----------------------------------------------------------
   Direction: "Bonded Courier"
   - Cooler off-paper light surface, dark-mode-equal
   - Ember as single bold accent (signal-orange)
   - Newsreader (display) + Geist Sans/Mono — fresh, technical,
     editorial. Vendored locally in fonts/ (no CDN dependency).
   - All tokens are CSS custom properties: base + semantic.
   ============================================================ */

/* ------------------------------------------------------------
   Webfonts — vendored locally under fonts/
   ------------------------------------------------------------ */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('fonts/Newsreader.ttf') format('truetype-variations'),
       url('fonts/Newsreader.ttf') format('truetype');
}
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
  src: url('fonts/Newsreader-Italic.ttf') format('truetype-variations'),
       url('fonts/Newsreader-Italic.ttf') format('truetype');
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/Geist-Variable.woff2') format('woff2-variations'),
       url('fonts/Geist-Variable.woff2') format('woff2');
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/GeistMono-Variable.woff2') format('woff2-variations'),
       url('fonts/GeistMono-Variable.woff2') format('woff2');
}

/* ------------------------------------------------------------
   FOUNDATION — light mode (paper)
   ------------------------------------------------------------ */
:root {
  /* ---- Surfaces (paper) — cooler, less yellow than v1 ------ */
  --paper-0:   #FBF8F2;   /* page bg — barely warm off-white */
  --paper-1:   #F4F0E6;   /* elevated cards */
  --paper-2:   #ECE6D6;   /* sunken wells / code blocks */
  --paper-3:   #DFD7C2;   /* dividers */
  --paper-4:   #BFB39A;   /* heavy borders, mile-markers */

  /* ---- Ink (foreground) — true near-black, slightly warm --- */
  --ink-0:     #15120D;   /* primary copy + ink lines */
  --ink-1:     #3A3328;   /* secondary copy */
  --ink-2:     #6B6151;   /* meta, captions */
  --ink-3:     #9C927F;   /* placeholders */

  /* ---- Ember — single bold accent ------------------------- */
  --ember:        #D9641C;  /* live, signal, the brand color */
  --ember-deep:   #B14C12;  /* pressed / hover */
  --ember-soft:   #F3B488;  /* tints */
  --ember-mist:   #FBE4CC;  /* surface tint, callouts */
  --ember-ink:    #6E2D08;  /* text-on-ember-mist */

  /* ---- Secondaries — used sparingly, semantic ------------- */
  --pine:         #2F5D50;  /* success, verified */
  --pine-soft:    #BFD2CA;
  --wire:         #3D6E96;  /* info / link */
  --wire-soft:    #BBCEDD;
  --postmark:     #9E2F22;  /* danger / failed delivery */
  --postmark-soft:#E9C0B9;

  /* ---- Type scale (modular ~1.22) ------------------------- */
  --t-2xs:  0.6875rem;  /* 11 */
  --t-xs:   0.75rem;    /* 12 */
  --t-sm:   0.8125rem;  /* 13 */
  --t-base: 0.9375rem;  /* 15 — body */
  --t-md:   1.0625rem;  /* 17 */
  --t-lg:   1.3125rem;  /* 21 */
  --t-xl:   1.625rem;   /* 26 */
  --t-2xl:  2.0625rem;  /* 33 */
  --t-3xl:  2.625rem;   /* 42 */
  --t-4xl:  3.5rem;     /* 56 */
  --t-5xl:  4.75rem;    /* 76 */
  --t-6xl:  6.5rem;     /* 104 */

  /* ---- Spacing (4-based) ---------------------------------- */
  --s-0:  0;
  --s-px: 1px;
  --s-1:  0.25rem;
  --s-2:  0.5rem;
  --s-3:  0.75rem;
  --s-4:  1rem;
  --s-5:  1.5rem;
  --s-6:  2rem;
  --s-7:  3rem;
  --s-8:  4.5rem;
  --s-9:  6rem;
  --s-10: 9rem;

  /* ---- Radii — mostly square; one pill for tags ---------- */
  --r-xs:  2px;
  --r-sm:  4px;
  --r-md:  6px;
  --r-lg:  10px;
  --r-pill: 999px;

  /* ---- Strokes — 1px lines do most of the work ----------- */
  --stroke-hair: 0.5px;
  --stroke-1:    1px;
  --stroke-2:    1.5px;
  --stroke-3:    2px;

  /* ---- Shadows — sparse; lines do the lifting ------------ */
  --shadow-edge:  0 0 0 1px var(--paper-3);
  --shadow-1:     0 1px 0 var(--paper-3);
  --shadow-2:     0 1px 2px rgba(21, 18, 13, 0.05),
                  0 2px 8px rgba(21, 18, 13, 0.04);
  --shadow-3:     0 2px 4px rgba(21, 18, 13, 0.08),
                  0 12px 28px rgba(21, 18, 13, 0.08);
  --shadow-focus: 0 0 0 3px var(--ember-mist),
                  0 0 0 4px var(--ember);
  --shadow-press: inset 0 1px 2px rgba(21, 18, 13, 0.08);

  /* ---- Motion --------------------------------------------- */
  --ease-out:   cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.5, 0, 0.2, 1);
  --dur-snap:   120ms;
  --dur-flow:   240ms;
  --dur-tide:   520ms;

  /* ---- Font stacks ---------------------------------------- */
  --font-display: 'Newsreader', 'Iowan Old Style', Georgia, serif;
  --font-sans:    'Geist', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'Geist Mono', 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

  /* ---- Layout --------------------------------------------- */
  --measure-prose:  62ch;
  --measure-narrow: 44ch;
  --container:      1180px;

  /* ---- SEMANTIC aliases ----------------------------------- */
  --bg:           var(--paper-0);
  --bg-elev:      var(--paper-1);
  --bg-sunken:    var(--paper-2);
  --border:       var(--paper-3);
  --border-strong:var(--paper-4);

  --fg:           var(--ink-0);
  --fg-muted:     var(--ink-1);
  --fg-meta:      var(--ink-2);
  --fg-placeholder: var(--ink-3);

  --accent:       var(--ember);
  --accent-deep:  var(--ember-deep);
  --accent-soft:  var(--ember-soft);
  --accent-mist:  var(--ember-mist);

  --link:         var(--wire);
  --success:      var(--pine);
  --danger:       var(--postmark);
}

/* ------------------------------------------------------------
   FOUNDATION — dark mode (lantern)
   ------------------------------------------------------------ */
[data-theme="dark"], :root[data-theme="dark"] {
  color-scheme: dark;
  --paper-0:   #0E0C09;
  --paper-1:   #161310;
  --paper-2:   #1F1A14;
  --paper-3:   #2E2820;
  --paper-4:   #4A4232;

  --ink-0:     #F4EEDD;
  --ink-1:     #C9C1AB;
  --ink-2:     #8B826E;
  --ink-3:     #5A5240;

  --ember:        #ED7A33;
  --ember-deep:   #D9641C;
  --ember-soft:   #F4A36E;
  --ember-mist:   #2A1A0E;
  --ember-ink:    #F4A36E;

  --pine:         #8FB39C;
  --pine-soft:    #1E2E28;
  --wire:         #8FB0CB;
  --wire-soft:    #1A2632;
  --postmark:     #D4736A;
  --postmark-soft:#2E1814;

  --shadow-edge:  0 0 0 1px var(--paper-3);
  --shadow-1:     0 1px 0 var(--paper-3);
  --shadow-2:     0 1px 2px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.35);
  --shadow-3:     0 2px 4px rgba(0, 0, 0, 0.6), 0 12px 28px rgba(0, 0, 0, 0.45);
  --shadow-focus: 0 0 0 3px var(--ember-mist), 0 0 0 4px var(--ember);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper-0:   #0E0C09;
    --paper-1:   #161310;
    --paper-2:   #1F1A14;
    --paper-3:   #2E2820;
    --paper-4:   #4A4232;
    --ink-0:     #F4EEDD;
    --ink-1:     #C9C1AB;
    --ink-2:     #8B826E;
    --ink-3:     #5A5240;
    --ember:        #ED7A33;
    --ember-deep:   #D9641C;
    --ember-soft:   #F4A36E;
    --ember-mist:   #2A1A0E;
    --ember-ink:    #F4A36E;
    --pine:         #8FB39C;
    --pine-soft:    #1E2E28;
    --wire:         #8FB0CB;
    --wire-soft:    #1A2632;
    --postmark:     #D4736A;
    --postmark-soft:#2E1814;
  }
}

/* ------------------------------------------------------------
   BASE — typography rules
   ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-size-adjust: none;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--t-base);
  font-weight: 400;
  line-height: 1.55;
  color: var(--fg);
  background: var(--bg);
  font-feature-settings: "ss03", "cv11";
}

/* Display headings — Newsreader, restrained weights */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 460;
  letter-spacing: -0.018em;
  line-height: 1.08;
  color: var(--fg);
  margin: 0;
  font-optical-sizing: auto;
}
h1 { font-size: var(--t-5xl); font-weight: 380; letter-spacing: -0.028em; }
h2 { font-size: var(--t-3xl); font-weight: 420; letter-spacing: -0.022em; }
h3 { font-size: var(--t-xl);  font-weight: 480; letter-spacing: -0.014em; line-height: 1.18; }
h4 { font-size: var(--t-lg);  font-weight: 520; letter-spacing: -0.010em; line-height: 1.25; }
h5 { font-size: var(--t-md);  font-weight: 560; letter-spacing: -0.005em; line-height: 1.3; }
h6 { font-size: var(--t-base); font-weight: 620; line-height: 1.35; }

p { margin: 0 0 var(--s-4); max-width: var(--measure-prose); }

small { font-size: var(--t-sm); color: var(--fg-meta); }

strong { font-weight: 600; color: var(--fg); }
em { font-style: italic; }

a {
  color: var(--link);
  text-decoration: underline;
  text-decoration-color: color-mix(in oklab, var(--link) 30%, transparent);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color var(--dur-snap) var(--ease-out),
              text-decoration-color var(--dur-snap) var(--ease-out);
}
a:hover {
  color: var(--ember-deep);
  text-decoration-color: var(--ember);
}

code, pre, kbd, samp {
  font-family: var(--font-mono);
  font-size: 0.92em;
  font-feature-settings: "zero", "ss01";
}

code {
  background: var(--bg-sunken);
  border: 1px solid var(--border);
  padding: 1px 6px;
  border-radius: var(--r-xs);
  color: var(--fg);
  font-size: 0.88em;
}

pre {
  background: var(--paper-0);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: var(--s-4);
  overflow-x: auto;
  font-size: var(--t-sm);
  line-height: 1.55;
}
[data-theme="dark"] pre { background: #08070A; }

kbd {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: var(--r-xs);
  padding: 1px 6px;
  font-size: 0.85em;
  color: var(--fg-muted);
}

hr {
  border: 0;
  height: 1px;
  background: linear-gradient(to right,
    transparent 0%, var(--border-strong) 14%, var(--border-strong) 86%, transparent 100%);
  margin: var(--s-7) 0;
}

::selection {
  background: var(--ember-soft);
  color: var(--ink-0);
}
[data-theme="dark"] ::selection {
  background: color-mix(in oklab, var(--ember) 50%, transparent);
  color: var(--ink-0);
}

/* ------------------------------------------------------------
   SEMANTIC text classes
   ------------------------------------------------------------ */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ember-deep);
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
}
[data-theme="dark"] .eyebrow { color: var(--ember); }
.eyebrow::before {
  content: "";
  width: 22px;
  height: 1px;
  background: currentColor;
}

.lede {
  font-family: var(--font-display);
  font-size: var(--t-lg);
  line-height: 1.45;
  color: var(--fg-muted);
  font-weight: 380;
  letter-spacing: -0.01em;
}

.meta {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  color: var(--fg-meta);
  letter-spacing: 0.02em;
}

/* ------------------------------------------------------------
   WORDMARK
   "g" in ember, rest in ink, underline stub on the g
   ------------------------------------------------------------ */
.wordmark {
  font-family: var(--font-display);
  font-weight: 380;
  letter-spacing: -0.030em;
  color: var(--fg);
  display: inline-flex;
  align-items: baseline;
  position: relative;
  white-space: nowrap;
  font-style: normal;
  line-height: 1;
}
.wordmark .g    { color: var(--ember); position: relative; }
.wordmark .g::after {
  /* short underscore — the "mount-point" mark — under the g only */
  content: "";
  position: absolute;
  left: 8%;
  right: 12%;
  bottom: -0.18em;
  height: 0.08em;
  background: var(--ember);
  border-radius: 2px;
}
.wordmark .rest { color: inherit; }

/* ------------------------------------------------------------
   TAGS / CHIPS
   ------------------------------------------------------------ */
.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  padding: 2px 8px;
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-weight: 500;
  border-radius: var(--r-xs);
  border: 1px solid var(--border);
  background: var(--bg-elev);
  color: var(--fg-muted);
  letter-spacing: 0.02em;
  line-height: 1.6;
}
.tag--ember    { color: var(--ember-deep); border-color: color-mix(in oklab, var(--ember) 50%, var(--border)); background: var(--ember-mist); }
.tag--pine     { color: var(--pine); border-color: color-mix(in oklab, var(--pine) 50%, var(--border)); background: var(--pine-soft); }
.tag--wire     { color: var(--wire); border-color: color-mix(in oklab, var(--wire) 50%, var(--border)); background: var(--wire-soft); }
.tag--postmark { color: var(--postmark); border-color: color-mix(in oklab, var(--postmark) 50%, var(--border)); background: var(--postmark-soft); }
[data-theme="dark"] .tag--ember { color: var(--ember); }

/* ------------------------------------------------------------
   BUTTONS
   ------------------------------------------------------------ */
.btn {
  font-family: var(--font-sans);
  font-size: var(--t-sm);
  font-weight: 500;
  letter-spacing: -0.005em;
  padding: 0.55em 1.1em;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  text-decoration: none;
  transition:
    background var(--dur-snap) var(--ease-out),
    border-color var(--dur-snap) var(--ease-out),
    color var(--dur-snap) var(--ease-out),
    transform var(--dur-snap) var(--ease-out),
    box-shadow var(--dur-snap) var(--ease-out);
  background: transparent;
  user-select: none;
  white-space: nowrap;
}
.btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.btn:active { transform: translateY(0.5px); box-shadow: var(--shadow-press); }

.btn--primary {
  background: var(--ink-0);
  color: var(--paper-0);
  border-color: var(--ink-0);
}
[data-theme="dark"] .btn--primary {
  background: var(--ember);
  color: var(--paper-0);
  border-color: var(--ember);
}
.btn--primary:hover {
  background: var(--ember-deep);
  border-color: var(--ember-deep);
  color: var(--paper-0);
}

.btn--ghost {
  background: transparent;
  color: var(--fg);
  border-color: var(--border-strong);
}
.btn--ghost:hover {
  border-color: var(--ember);
  color: var(--ember-deep);
  background: var(--ember-mist);
}
[data-theme="dark"] .btn--ghost:hover { color: var(--ember); }

.btn--ember {
  background: var(--ember);
  color: #FFF8EE;
  border-color: var(--ember);
}
.btn--ember:hover {
  background: var(--ember-deep);
  border-color: var(--ember-deep);
}

.btn--sm { padding: 0.4em 0.85em; font-size: var(--t-xs); }
.btn--lg { padding: 0.75em 1.4em; font-size: var(--t-base); }

/* ------------------------------------------------------------
   FORM INPUTS
   ------------------------------------------------------------ */
.input, .textarea, .select {
  font-family: var(--font-sans);
  font-size: var(--t-sm);
  width: 100%;
  padding: 0.6em 0.85em;
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  color: var(--fg);
  transition: border-color var(--dur-snap) var(--ease-out),
              box-shadow var(--dur-snap) var(--ease-out);
}
.input::placeholder, .textarea::placeholder { color: var(--fg-placeholder); }
.input:focus, .textarea:focus, .select:focus {
  outline: none;
  border-color: var(--ember);
  box-shadow: 0 0 0 3px var(--ember-mist);
}

.input--mono { font-family: var(--font-mono); }

/* ------------------------------------------------------------
   CARDS
   ------------------------------------------------------------ */
.card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--s-5);
}
.card--flat { box-shadow: none; }
.card--lift { box-shadow: var(--shadow-2); }
.card--ember { border-color: color-mix(in oklab, var(--ember) 35%, var(--border)); }

/* ------------------------------------------------------------
   GRID — subtle technical background
   Used for hero / demo surfaces. Not on every page.
   ------------------------------------------------------------ */
.grid-bg {
  background-image:
    linear-gradient(to right, color-mix(in oklab, var(--border) 70%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in oklab, var(--border) 70%, transparent) 1px, transparent 1px);
  background-size: 28px 28px;
  background-position: -1px -1px;
}

/* ------------------------------------------------------------
   ANIMATIONS — restrained
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(6px); animation: reveal-up 0.7s var(--ease-out) forwards; }
  .reveal[data-delay="1"] { animation-delay: 0.04s; }
  .reveal[data-delay="2"] { animation-delay: 0.10s; }
  .reveal[data-delay="3"] { animation-delay: 0.18s; }
  .reveal[data-delay="4"] { animation-delay: 0.28s; }
  .reveal[data-delay="5"] { animation-delay: 0.40s; }
  .reveal[data-delay="6"] { animation-delay: 0.54s; }
  @keyframes reveal-up { to { opacity: 1; transform: translateY(0); } }

  .pulse { animation: pulse 2.2s var(--ease-in-out) infinite; }
  @keyframes pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.45; }
  }
}