/* ==========================================================================
   FlowTech Solutions — brand system v1.0
   One stylesheet every FlowTech tool starts from.

   Link it:   <link rel="stylesheet" href="https://flowtechnicalsolutions.com/brand/flowtech.css">
   Or copy it into the project and load the fonts yourself:

   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400;1,9..144,500&family=Instrument+Sans:wght@400;500;600&family=Spline+Sans+Mono:wght@400;500&display=swap" rel="stylesheet">

   The system in one sentence: warm dark ink surfaces, parchment text,
   one copper accent used sparingly, serif display type over sans body,
   mono for labels and data.
   ========================================================================== */

:root {
  /* --- Surfaces (dark, warm — "ink") --------------------------------- */
  --ink:            #17120D;   /* page background */
  --umber:          #1F1913;   /* raised surface: cards, nav, panels */
  --raise:          #2A2219;   /* higher surface: hover states, inputs */
  --hairline:       #3A3126;   /* borders. Always 1px. Never pure gray. */

  /* --- Text ----------------------------------------------------------- */
  --parchment:      #EDE4D3;   /* primary text */
  --faded:          #A29279;   /* secondary text, captions */
  --dim:            #6E6154;   /* tertiary text, placeholders, disabled */

  /* --- Accent (one accent only) --------------------------------------- */
  --copper:         #C98A4B;   /* links, primary buttons, active states */
  --copper-bright:  #E3A968;   /* hover on copper, emphasis */
  --copper-soft:    rgba(201, 138, 75, 0.12);  /* tinted fills, selection */

  /* --- Feedback ------------------------------------------------------- */
  --ok:             #7FA25E;   /* success */
  --error:          #D96A5B;   /* errors, destructive */
  --warn:           #D9A75B;   /* caution */

  /* --- "Paper" variant (documents, PDFs, printables) ------------------ */
  /* Same hues, inverted: use for briefs, invoices, exported documents.  */
  --paper:          #F3EDE1;
  --paper-ink:      #1A140E;
  --paper-faded:    #6E6154;
  --paper-hairline: #D8CDBA;

  /* --- Type ----------------------------------------------------------- */
  --font-display: "Fraunces", Georgia, serif;
  --font-body:    "Instrument Sans", -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "Spline Sans Mono", ui-monospace, "SF Mono", monospace;

  /* Type scale (1.250 ratio, rem) */
  --text-xs:   0.8rem;
  --text-sm:   0.9rem;
  --text-base: 1rem;
  --text-lg:   1.25rem;
  --text-xl:   1.563rem;
  --text-2xl:  1.953rem;
  --text-3xl:  2.441rem;
  --text-4xl:  3.052rem;

  /* --- Space (4px base) ------------------------------------------------ */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px;

  /* --- Shape ----------------------------------------------------------- */
  --radius-sm: 6px;    /* inputs, small buttons, tags */
  --radius:    10px;   /* buttons, cards */
  --radius-lg: 16px;   /* large panels, modals */

  /* --- Elevation (subtle; dark UIs elevate by surface, not shadow) ----- */
  --shadow-1: 0 1px 2px rgba(0,0,0,0.35);
  --shadow-2: 0 8px 28px rgba(0,0,0,0.45);

  /* --- Motion ---------------------------------------------------------- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --fast: 140ms;
  --slow: 320ms;
}

/* ==========================================================================
   Base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body.ft {
  background: var(--ink);
  color: var(--parchment);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* Faint copper atmosphere — the signature backdrop. Use once per page. */
body.ft::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(1100px 700px at 12% -10%, rgba(201,138,75,0.07), transparent 60%),
    radial-gradient(900px 600px at 100% 110%, rgba(201,138,75,0.04), transparent 55%);
}

.ft ::selection { background: var(--copper-soft); color: var(--copper-bright); }

/* --- Headings: serif display, tight, never bold-heavy ------------------- */
.ft h1, .ft h2, .ft h3, .ft .display {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.12;
  color: var(--parchment);
}
.ft h1 { font-size: clamp(var(--text-2xl), 5vw, var(--text-4xl)); }
.ft h2 { font-size: clamp(var(--text-xl), 3.5vw, var(--text-3xl)); }
.ft h3 { font-size: var(--text-lg); }
.ft em { font-style: italic; color: var(--copper-bright); font-family: var(--font-display); }

/* --- Eyebrow: mono micro-label above headings — the brand's signature --- */
.ft-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--copper);
}

/* Prose links only — buttons rendered as <a class="ft-btn …"> keep their own
   colors (:where keeps specificity at 0,1,1 so the variant rules below win). */
.ft a:not(:where(.ft-btn)) { color: var(--copper); text-decoration: none; transition: color var(--fast) var(--ease); }
.ft a:not(:where(.ft-btn)):hover { color: var(--copper-bright); }

.ft .muted { color: var(--faded); }
.ft .mono  { font-family: var(--font-mono); font-size: 0.92em; }

/* ==========================================================================
   Components
   ========================================================================== */

/* --- Buttons ------------------------------------------------------------ */
.ft-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  padding: 12px 24px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: all var(--fast) var(--ease);
}
.ft-btn-primary { background: var(--copper); color: var(--ink); }
.ft-btn-primary:hover { background: var(--copper-bright); color: var(--ink); transform: translateY(-1px); }
.ft-btn-ghost { background: transparent; color: var(--parchment); border-color: var(--hairline); }
.ft-btn-ghost:hover { border-color: var(--copper); color: var(--copper-bright); }
.ft-btn-danger { background: transparent; color: var(--error); border-color: var(--error); }
.ft-btn-lg { padding: 15px 32px; font-size: var(--text-base); }
.ft-btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }

/* --- Card ---------------------------------------------------------------- */
.ft-card {
  background: var(--umber);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
}
.ft-card:hover { border-color: #4A3F30; }

/* --- Inputs --------------------------------------------------------------- */
.ft-field label {
  display: block;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--parchment);
  margin-bottom: var(--sp-2);
}
.ft-input, .ft textarea, .ft select {
  width: 100%;
  background: var(--raise);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  color: var(--parchment);
  font-family: var(--font-body);
  font-size: var(--text-base);
  padding: 11px 14px;
  transition: border-color var(--fast) var(--ease);
}
.ft-input::placeholder { color: var(--dim); }
.ft-input:focus, .ft textarea:focus, .ft select:focus {
  outline: none;
  border-color: var(--copper);
  box-shadow: 0 0 0 3px var(--copper-soft);
}
.ft-input[aria-invalid="true"] { border-color: var(--error); }
.ft-field-error { color: var(--error); font-size: var(--text-xs); margin-top: var(--sp-1); }

/* --- Tags / status pills -------------------------------------------------- */
.ft-tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  padding: 4px 10px;
  border-radius: 100px;
  border: 1px solid var(--hairline);
  color: var(--faded);
}
.ft-tag-copper { color: var(--copper); border-color: rgba(201,138,75,0.4); background: var(--copper-soft); }
.ft-tag-ok     { color: var(--ok);     border-color: rgba(127,162,94,0.4); background: rgba(127,162,94,0.1); }
.ft-tag-error  { color: var(--error);  border-color: rgba(217,106,91,0.4); background: rgba(217,106,91,0.1); }

/* --- Tables ---------------------------------------------------------------- */
.ft-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.ft-table th {
  font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: 0.1em; text-transform: uppercase; font-weight: 500;
  color: var(--dim); text-align: left;
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--hairline);
}
.ft-table td { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--hairline); }
.ft-table tr:hover td { background: rgba(201,138,75,0.04); }

/* --- Hairline divider ------------------------------------------------------- */
.ft-rule { border: none; border-top: 1px solid var(--hairline); margin: var(--sp-6) 0; }