/* ============================================================
   BuildGood Design Tokens
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500;600&display=swap');

:root {
  /* -----------------------------------------------------------
     COLOR
     ----------------------------------------------------------- */

  /* Core */
  --ink:        #0A0A0A;
  --paper:      #FAFAF7;
  --white:      #FFFFFF;

  /* Graphite ramp — neutral, slightly warm */
  --graphite-1: #F0EFEA;  /* hairlines on paper */
  --graphite-2: #E2E0DA;  /* card borders, dividers */
  --graphite-3: #BFBDB5;  /* tick marks, disabled text */
  --graphite-4: #8A8880;  /* secondary icons */
  --graphite-5: #5C5A53;  /* secondary text */
  --graphite-6: #2E2D29;  /* near-ink, for inverted hairlines */

  /* The red. One red, used with intent. */
  --red:        #E5311C;
  --red-deep:   #B91F0F;
  --red-wash:   #FCEBE8;

  /* Status — used only for status, never decoration */
  --green:      #1F7A4D;
  --green-wash: #E6F1EB;
  --amber:      #C77A0A;
  --amber-wash: #FAF1DD;

  /* Semantic */
  --fg-1:       var(--ink);
  --fg-2:       var(--graphite-5);
  --fg-3:       var(--graphite-4);
  --fg-disabled: var(--graphite-3);
  --fg-inverse: var(--paper);

  --bg-page:    var(--paper);
  --bg-surface: var(--white);
  --bg-sunken:  #F4F2EC;
  --bg-inverse: var(--ink);

  --border-1:   var(--graphite-2);
  --border-2:   var(--graphite-3);
  --border-strong: var(--ink);

  --accent:     var(--red);
  --accent-deep: var(--red-deep);
  --accent-wash: var(--red-wash);

  /* -----------------------------------------------------------
     TYPE
     ----------------------------------------------------------- */
  --font-sans: "Geist", "Söhne", "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono: "Geist Mono", "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Type scale (1.250 ratio off 16) */
  --text-display:   64px;
  --text-h1:        44px;
  --text-h2:        32px;
  --text-h3:        24px;
  --text-lg:        18px;
  --text-base:      16px;
  --text-sm:        14px;
  --text-xs:        12px;
  --text-mono-sm:   12px;

  --lh-tight:       1.05;
  --lh-snug:        1.2;
  --lh-normal:      1.5;
  --lh-loose:       1.65;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-mono:   0.08em;  /* uppercase mono labels */

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semi:    600;
  --weight-bold:    700;

  /* -----------------------------------------------------------
     SPACING — 8pt grid
     ----------------------------------------------------------- */
  --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;
  --s-10: 128px;

  /* -----------------------------------------------------------
     RADII
     ----------------------------------------------------------- */
  --r-0: 0px;
  --r-1: 4px;
  --r-2: 8px;
  --r-3: 16px;
  --r-full: 999px; /* avatars, status pips only */

  /* -----------------------------------------------------------
     ELEVATION
     ----------------------------------------------------------- */
  --shadow-1: 0 1px 0 0 rgba(10,10,10,0.06), 0 1px 2px rgba(10,10,10,0.04);
  --shadow-2: 0 8px 24px rgba(10,10,10,0.08), 0 2px 6px rgba(10,10,10,0.04);

  /* -----------------------------------------------------------
     MOTION
     ----------------------------------------------------------- */
  --dur-fast:   150ms;
  --dur-base:   220ms;
  --dur-slow:   320ms;
  --ease-out:   cubic-bezier(0.2, 0, 0, 1);
  --ease-inout: cubic-bezier(0.4, 0, 0.2, 1);

  /* -----------------------------------------------------------
     LAYOUT
     ----------------------------------------------------------- */
  --layout-max:       1280px;
  --layout-max-wide:  1440px;
  --layout-gutter:    96px;
  --nav-h:            64px;
  --sidebar-w:        240px;
  --rail-w:           320px;
}

/* ============================================================
   SEMANTIC ELEMENTS
   ============================================================ */

html, body {
  background: var(--bg-page);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.display, h1.display {
  font-family: var(--font-sans);
  font-size: var(--text-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: var(--weight-bold);
}

h1, .h1 {
  font-size: var(--text-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: var(--weight-bold);
}

h2, .h2 {
  font-size: var(--text-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  font-weight: var(--weight-semi);
}

h3, .h3 {
  font-size: var(--text-h3);
  line-height: var(--lh-snug);
  font-weight: var(--weight-semi);
}

.lead, p.lead {
  font-size: var(--text-lg);
  line-height: var(--lh-normal);
  color: var(--fg-2);
}

p, .body {
  font-size: var(--text-base);
  line-height: var(--lh-normal);
}

small, .caption {
  font-size: var(--text-sm);
  color: var(--fg-2);
}

.mono, code, kbd, .mono-label {
  font-family: var(--font-mono);
  font-size: var(--text-mono-sm);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--fg-2);
}

a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--graphite-3);
  text-underline-offset: 3px;
  transition: text-decoration-color var(--dur-fast) var(--ease-out);
}
a:hover { text-decoration-color: var(--ink); }

/* ============================================================
   PRIMITIVE COMPONENTS (lightweight, optional)
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  height: 40px;
  padding: 0 var(--s-4);
  border-radius: var(--r-1);
  border: 1px solid transparent;
  background: transparent;
  font: inherit;
  font-weight: var(--weight-medium);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.btn:active { transform: scale(0.98); }
.btn:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}

.btn-primary {
  background: var(--red);
  color: var(--white);
}
.btn-primary:hover { background: var(--red-deep); }

.btn-secondary {
  background: var(--white);
  color: var(--ink);
  border-color: var(--border-1);
}
.btn-secondary:hover { background: var(--bg-sunken); }

.btn-ghost {
  background: transparent;
  color: var(--ink);
}
.btn-ghost:hover { background: var(--bg-sunken); }

.btn-inverse {
  background: var(--ink);
  color: var(--paper);
}
.btn-inverse:hover { background: var(--graphite-6); }

.input {
  height: 40px;
  padding: 0 var(--s-3);
  border: 1px solid var(--border-1);
  border-radius: var(--r-1);
  background: var(--white);
  font: inherit;
  font-size: var(--text-sm);
  color: var(--fg-1);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.input:focus {
  outline: 2px solid var(--red);
  outline-offset: 2px;
  border-color: var(--ink);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  height: 22px;
  padding: 0 var(--s-2);
  border-radius: var(--r-1);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  font-weight: var(--weight-medium);
  border: 1px solid currentColor;
}
.chip-draft   { color: var(--graphite-5); background: var(--bg-sunken); border-color: var(--border-1); }
.chip-review  { color: var(--amber);      background: var(--amber-wash); border-color: transparent; }
.chip-approve { color: var(--green);      background: var(--green-wash); border-color: transparent; }
.chip-changes { color: var(--red);        background: var(--red-wash);   border-color: transparent; }

.card {
  background: var(--bg-surface);
  border: 1px solid var(--border-1);
  border-radius: var(--r-2);
  padding: var(--s-5);
  position: relative;
}
.card.card-live { box-shadow: var(--shadow-1); }

/* Signature corner tick marks — for hero cards, active wizard step */
.card-ticked::before,
.card-ticked::after,
.card-ticked > .tick-tl,
.card-ticked > .tick-tr {
  content: "";
  position: absolute;
  width: 8px; height: 8px;
  border: 0 solid var(--graphite-4);
  pointer-events: none;
}
.card-ticked::before { top: -1px; left: -1px;  border-top-width: 1px; border-left-width: 1px; }
.card-ticked::after  { top: -1px; right: -1px; border-top-width: 1px; border-right-width: 1px; }
.card-ticked > .tick-bl { bottom: -1px; left: -1px;  border-bottom-width: 1px; border-left-width: 1px; }
.card-ticked > .tick-br { bottom: -1px; right: -1px; border-bottom-width: 1px; border-right-width: 1px; }

/* Optional blueprint grid background */
.bg-grid {
  background-image:
    linear-gradient(to right, var(--graphite-1) 1px, transparent 1px),
    linear-gradient(to bottom, var(--graphite-1) 1px, transparent 1px);
  background-size: 24px 24px;
}
.bg-grid-lg {
  background-image:
    linear-gradient(to right, var(--graphite-1) 1px, transparent 1px),
    linear-gradient(to bottom, var(--graphite-1) 1px, transparent 1px);
  background-size: 48px 48px;
}