/* =========================================================================
   Furrow — Colors & Type
   Single source of truth for color + type tokens.
   Import this in every Furrow surface.
   Palette: Slate & Rust — warm parchment surfaces, cool slate ink,
   rust as the one loud voice. Type system carried over unchanged.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&family=Source+Serif+4:ital,wght@0,400;0,600;1,400&display=swap');

:root {
  /* =====================================================
     COLOR — surfaces (warm parchment scale)
     ===================================================== */
  --parchment-0:  #FBF9F3;   /* lightest working surface */
  --parchment-1:  #F6F1E6;   /* primary surface */
  --parchment-2:  #EFE7D6;   /* alt band / panel */
  --parchment-3:  #E6DBC5;   /* deep band */
  --white:        #ffffff;

  /* =====================================================
     COLOR — slate (ink + structure)
     ===================================================== */
  --slate-50:   #ECF0F1;
  --slate-100:  #DBE2E5;
  --slate-200:  #BFCAD0;
  --slate-300:  #95A5AE;
  --slate-400:  #677B87;   /* muted / metadata */
  --slate-500:  #475C68;   /* secondary text */
  --slate-600:  #36464F;
  --slate-800:  #2B3A45;   /* ink — primary text */
  --slate-900:  #1D2932;   /* dark band */
  --slate-950:  #141D24;

  /* =====================================================
     COLOR — functional accents. Rust is the only loud voice.
     ===================================================== */
  /* Rust — attention, primary CTA, the seed */
  --rust-50:    #FAEDE5;
  --rust-100:   #F4D7C5;
  --rust-300:   #E08F65;
  --rust-500:   #C4502E;   /* primary accent. AA at large sizes on parchment */
  --rust-600:   #A64224;   /* body-size rust text */
  --rust-700:   #87351D;
  --rust-bright:#D96A45;   /* rust on dark surfaces only */

  /* Sage — secondary, supporting, quiet structure */
  --sage-50:    #EFF2EE;
  --sage-300:   #B0BDB1;
  --sage-500:   #8A9A8B;
  --sage-700:   #57665A;

  /* Field green — approved, proof, passed */
  --green-50:   #EAF1E6;
  --green-500:  #4E7347;
  --green-700:  #35522F;

  /* Wheat — caution, manual review */
  --wheat-50:   #FBF2DC;
  --wheat-300:  #E5BA61;
  --wheat-500:  #D9A23B;
  --wheat-700:  #845F0D;

  /* Red — error / blocked (rare; hard failures only) */
  --red-500:    #9E2F28;

  /* =====================================================
     SEMANTIC — surfaces & content
     ===================================================== */
  --surface-0:        var(--parchment-0);
  --surface-1:        var(--parchment-1);
  --surface-2:        var(--parchment-2);
  --surface-3:        var(--parchment-3);
  --surface-ink:      var(--slate-900);
  --surface-ink-2:    var(--slate-800);

  --fg-1:             var(--slate-800);
  --fg-2:             var(--slate-500);
  --fg-3:             var(--slate-400);
  --fg-disabled:      var(--slate-300);

  --fg-on-ink-1:      #F3EDDF;   /* cream — primary text on dark */
  --fg-on-ink-2:      #B4BDB9;
  --fg-on-ink-3:      #80908F;

  --border-1:         #E0D8C6;   /* warm hairline on parchment */
  --border-2:         #C9BFA8;   /* hover / emphasized */
  --border-strong:    var(--slate-400);
  --border-on-ink-1:  #2E3D47;
  --border-on-ink-2:  #41525D;

  /* Functional semantic */
  --accent-cta:       var(--rust-500);
  --accent-cta-hover: var(--rust-600);
  --accent-cta-press: var(--rust-700);
  --accent-approved:  var(--green-500);
  --accent-quiet:     var(--sage-500);
  --accent-caution:   var(--wheat-500);
  --accent-blocked:   var(--red-500);

  /* Status chip palettes (bg / fg) */
  --chip-approved-bg: var(--green-50);
  --chip-approved-fg: var(--green-700);
  --chip-process-bg:  var(--slate-50);
  --chip-process-fg:  var(--slate-600);
  --chip-caution-bg:  var(--wheat-50);
  --chip-caution-fg:  var(--wheat-700);
  --chip-cta-bg:      var(--rust-50);
  --chip-cta-fg:      var(--rust-700);
  --chip-neutral-bg:  var(--sage-50);
  --chip-neutral-fg:  var(--sage-700);

  /* Engineering-paper grid (heroes, proof bands) — warmed */
  --bg-grid: linear-gradient(to right, rgba(43,58,69,0.05) 1px, transparent 1px) 0 0 / 24px 24px,
             linear-gradient(to bottom, rgba(43,58,69,0.05) 1px, transparent 1px) 0 0 / 24px 24px;
  --bg-grid-on-ink: linear-gradient(to right, rgba(243,237,223,0.05) 1px, transparent 1px) 0 0 / 24px 24px,
                    linear-gradient(to bottom, rgba(243,237,223,0.05) 1px, transparent 1px) 0 0 / 24px 24px;

  /* =====================================================
     TYPE — families (unchanged from previous system)
     ===================================================== */
  --font-sans:    "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-serif:   "Source Serif 4", Georgia, serif;

  /* TYPE — sizes (rem-based, 16px root) */
  --text-xs:    0.6875rem;  /* 11px — mono labels */
  --text-sm:    0.8125rem;  /* 13px — small UI */
  --text-base:  0.9375rem;  /* 15px — default body */
  --text-md:    1rem;       /* 16px — comfortable body */
  --text-lg:    1.125rem;   /* 18px — lede */
  --text-xl:    1.375rem;   /* 22px — h4 */
  --text-2xl:   1.75rem;    /* 28px — h3 */
  --text-3xl:   2.25rem;    /* 36px — h2 */
  --text-4xl:   3rem;       /* 48px — h1 */
  --text-5xl:   4rem;       /* 64px — display */
  --text-6xl:   5.25rem;    /* 84px — hero display */

  /* TYPE — weights & spacing */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-normal:  1.45;
  --lh-loose:   1.6;

  --tr-tight:   -0.02em;
  --tr-snug:    -0.01em;
  --tr-normal:  0;
  --tr-mono:    0.04em;
  --tr-caps:    0.08em;
}

/* =====================================================
   ELEMENT BASELINES
   ===================================================== */
html { font-family: var(--font-sans); color: var(--fg-1); background: var(--surface-1); }
body { font-size: var(--text-base); line-height: var(--lh-normal); -webkit-font-smoothing: antialiased; }

h1, h2, h3, h4, h5, h6 { font-family: var(--font-sans); color: var(--fg-1); margin: 0; font-weight: var(--fw-semibold); }

h1 { font-size: var(--text-4xl); line-height: var(--lh-tight); letter-spacing: var(--tr-tight); font-weight: var(--fw-bold); }
h2 { font-size: var(--text-3xl); line-height: var(--lh-tight); letter-spacing: var(--tr-tight); font-weight: var(--fw-semibold); }
h3 { font-size: var(--text-2xl); line-height: var(--lh-snug);  letter-spacing: var(--tr-tight); font-weight: var(--fw-semibold); }
h4 { font-size: var(--text-xl);  line-height: var(--lh-snug);  letter-spacing: var(--tr-snug);  font-weight: var(--fw-semibold); }
h5 { font-size: var(--text-lg);  line-height: var(--lh-snug);  letter-spacing: var(--tr-snug);  font-weight: var(--fw-semibold); }

p { margin: 0; color: var(--fg-1); }
small { font-size: var(--text-sm); color: var(--fg-2); }

/* =====================================================
   TYPOGRAPHIC UTILITIES
   ===================================================== */
.t-display      { font-size: var(--text-5xl); line-height: var(--lh-tight); letter-spacing: var(--tr-tight); font-weight: var(--fw-bold); }
.t-display-xl   { font-size: var(--text-6xl); line-height: var(--lh-tight); letter-spacing: var(--tr-tight); font-weight: var(--fw-bold); }
.t-h1           { font-size: var(--text-4xl); line-height: var(--lh-tight); letter-spacing: var(--tr-tight); font-weight: var(--fw-bold); }
.t-h2           { font-size: var(--text-3xl); line-height: var(--lh-tight); letter-spacing: var(--tr-tight); font-weight: var(--fw-semibold); }
.t-h3           { font-size: var(--text-2xl); line-height: var(--lh-snug);  letter-spacing: var(--tr-tight); font-weight: var(--fw-semibold); }
.t-h4           { font-size: var(--text-xl);  line-height: var(--lh-snug);  letter-spacing: var(--tr-snug);  font-weight: var(--fw-semibold); }
.t-lede         { font-size: var(--text-lg);  line-height: var(--lh-normal); color: var(--fg-2); }
.t-body         { font-size: var(--text-base);line-height: var(--lh-normal); }
.t-body-lg      { font-size: var(--text-md);  line-height: var(--lh-normal); }
.t-meta         { font-size: var(--text-sm); color: var(--fg-2); }

.t-mono         { font-family: var(--font-mono); font-size: var(--text-sm); letter-spacing: var(--tr-mono); }
.t-mono-label   { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--fg-3); font-weight: var(--fw-medium); }
.t-mono-id      { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tr-mono); color: var(--fg-2); }

.t-serif-quote  { font-family: var(--font-serif); font-size: var(--text-2xl); line-height: 1.3; font-style: italic; color: var(--fg-1); }

/* On-ink variants */
.t-on-ink         { color: var(--fg-on-ink-1); }
.t-on-ink-muted   { color: var(--fg-on-ink-2); }
.t-on-ink-meta    { color: var(--fg-on-ink-3); }