/* FichaAPI — design tokens
   Industrial / blueprint feel: cream paper ground, deep ink, terracotta accent.
   All spacing in 4px grid. */

:root {
  /* paper & ink */
  --paper:            #F5F1E8;
  --paper-2:          #EEE8D9;
  --paper-3:          #E6DEC9;
  --ink:              #14110D;
  --ink-2:            #2B2620;
  --ink-3:            #5A5247;
  --ink-4:            #8A8273;
  --ink-5:            #B5AC9A;
  --rule:             #1C1913;       /* 1px hairlines */
  --rule-soft:        rgba(20,17,13,0.14);
  --rule-softer:      rgba(20,17,13,0.08);

  /* accent — terracotta */
  --accent:           #B8471F;
  --accent-2:         #9B3813;
  --accent-ink:       #FDF7EE;
  --accent-bg:        #F5D9C8;
  --accent-hair:      rgba(184,71,31,0.35);

  /* semantics (subdued, tinted for cream ground) */
  --ok:               #3F6B3A;
  --ok-bg:            #DCE4C9;
  --warn:             #A67400;
  --warn-bg:          #F2E3B5;
  --danger:           #9B2C1F;
  --danger-bg:        #EECDC4;
  --info:             #2B4F7A;
  --info-bg:          #CFD9E4;

  /* type */
  --font-sans:        "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-serif:       "Fraunces", "GT Super", Georgia, serif;
  --font-mono:        "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace;

  /* grid */
  --step:             4px;
  --radius:           2px;
  --radius-lg:        4px;

  /* shadow (used sparingly) */
  --shadow-1:         0 1px 0 rgba(20,17,13,0.04), 0 1px 2px rgba(20,17,13,0.06);
  --shadow-2:         0 2px 0 rgba(20,17,13,0.05), 0 6px 16px rgba(20,17,13,0.08);
}

/* base */
.fa-root {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  font-size: 14px;
  line-height: 1.45;
  letter-spacing: -0.005em;
  position: relative;
}

/* paper grain overlay */
.fa-root::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(0deg, transparent 0 23px, rgba(20,17,13,0.018) 23px 24px),
    radial-gradient(1200px 600px at 20% -10%, rgba(184,71,31,0.03), transparent 60%);
  mix-blend-mode: multiply;
  z-index: 0;
}
.fa-root > * { position: relative; z-index: 1; }

.fa-root * { box-sizing: border-box; }
.fa-mono { font-family: var(--font-mono); font-feature-settings: "tnum"; }
.fa-serif { font-family: var(--font-serif); }
.fa-tnum { font-variant-numeric: tabular-nums; }

/* microtype */
.fa-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.fa-eyebrow.accent { color: var(--accent); }

.fa-hairline { border-top: 1px solid var(--rule); }
.fa-hairline-soft { border-top: 1px solid var(--rule-soft); }

/* inputs / buttons baseline */
.fa-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  font: 500 13px var(--font-sans);
  letter-spacing: -0.005em;
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  cursor: pointer;
  height: 32px;
}
.fa-btn:hover { background: var(--ink-2); }
.fa-btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.fa-btn.primary:hover { background: var(--accent-2); border-color: var(--accent-2); }
.fa-btn.ghost { background: transparent; color: var(--ink); border-color: var(--rule-soft); }
.fa-btn.ghost:hover { background: var(--paper-2); border-color: var(--ink); }
.fa-btn.sm { height: 26px; padding: 4px 10px; font-size: 12px; }

.fa-input {
  height: 32px; padding: 0 10px;
  background: #FFFDF8;
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius);
  font: 400 13px var(--font-sans);
  color: var(--ink);
  outline: none;
}
.fa-input:focus { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(20,17,13,0.06); }

/* chips */
.fa-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 8px;
  font: 500 11px/1 var(--font-mono);
  letter-spacing: 0.02em;
  border-radius: 999px;
  border: 1px solid var(--rule-soft);
  background: var(--paper-2);
  color: var(--ink-2);
  white-space: nowrap;
}
.fa-chip.ok     { background: var(--ok-bg);     color: var(--ok);     border-color: rgba(63,107,58,0.3); }
.fa-chip.warn   { background: var(--warn-bg);   color: var(--warn);   border-color: rgba(166,116,0,0.3); }
.fa-chip.danger { background: var(--danger-bg); color: var(--danger); border-color: rgba(155,44,31,0.3); }
.fa-chip.info   { background: var(--info-bg);  color: var(--info);  border-color: rgba(43,79,122,0.3); }
.fa-chip.accent { background: var(--accent-bg); color: var(--accent-2); border-color: var(--accent-hair); }
.fa-chip .dot { width: 6px; height: 6px; border-radius: 999px; background: currentColor; }

/* thin tables */
.fa-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.fa-table th {
  text-align: left;
  font: 500 10px/1 var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-4);
  padding: 8px 12px;
  border-bottom: 1px solid var(--rule-soft);
  white-space: nowrap;
}
.fa-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--rule-softer);
  vertical-align: middle;
}
.fa-table tr:hover td { background: rgba(20,17,13,0.02); }

/* dotted rule (blueprint) */
.fa-dotted { border-top: 1px dashed var(--rule-soft); }

/* corner ticks — used on cards / panels */
.fa-ticked {
  position: relative;
  border: 1px solid var(--rule-soft);
  background: #FFFDF8;
}
.fa-ticked::before,
.fa-ticked::after {
  content: "";
  position: absolute;
  width: 8px; height: 8px;
  border: 1px solid var(--ink);
}
.fa-ticked::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.fa-ticked::after  { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }

/* placeholder stripes */
.fa-placeholder {
  background-image: repeating-linear-gradient(
    45deg,
    rgba(20,17,13,0.04) 0 6px,
    transparent 6px 12px
  );
  border: 1px dashed var(--rule-soft);
  color: var(--ink-4);
  font: 500 10px/1 var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  display: flex; align-items: center; justify-content: center;
}