/* =============================================================================
   F3i Tool Library — tokens.css
   Section 1 of the F3i UI Design Guidelines, copied verbatim, followed by a
   minimal reset, base typography, and the shared recipes from guide sections
   5 and 11. No component styles live here.
   ========================================================================== */

/* --------------------------------------------- guide section 1: verbatim */
:root{
  /* Core brand palette */
  --navy:#1E3A6E;        /* Navy Ink: primary, foundation */
  --obsidian:#0F172A;    /* Obsidian Black: depth, dark UI, body ink */
  --mist:#7DD3FC;        /* Cornflower Mist: the single bright point, dark surfaces only */
  --brown:#B39164;       /* Doe Brown: warm metal, secondary */
  --gold:#8F6B2E;        /* Burnished Gold: premium accent, eyebrows, highlights */
  --gold-foil:#C9A24B;   /* Gold highlight tint: italic serif accents, tints */
  --white:#FFFFFF;

  /* Semantic (product UI only, not brand marketing) */
  --green:#2F7D5E;       /* success, done, verified */
  --red:#B23A36;         /* error, pain point, blocking */

  /* Surfaces and text */
  --paper:#F6F7F9;       /* app background, subtle panels */
  --paper-warm:#F3EFE7;  /* editorial warm surface */
  --ink:#0F172A;         /* default text */
  --muted:#5A6473;       /* secondary text */
  --line:rgba(15,23,42,.12);       /* standard border */
  --line-soft:rgba(15,23,42,.07);  /* subtle border, row dividers */
  --navy-line:rgba(125,211,252,.20); /* blueprint grid lines on navy */

  /* Type */
  --grotesk:'Hanken Grotesk',-apple-system,sans-serif; /* headlines, UI chrome */
  --serif:'Fraunces',Georgia,serif;                    /* editorial display, italic accents */
  --sans:'Inter',-apple-system,sans-serif;             /* body copy */
  --mono:'IBM Plex Mono',ui-monospace,monospace;       /* labels, data, specs */

  /* Shape and depth */
  --radius:10px;
  --shadow:0 1px 2px rgba(15,23,42,.04),0 8px 24px rgba(15,23,42,.05);

  /* Spacing scale, 4px base */
  --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:20px; --space-6:24px; --space-7:32px;
}

/* ------------------------------------------------------------ 2. reset */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body,h1,h2,h3,h4,p,figure,blockquote,dl,dd,ol,ul{margin:0}
ol[class],ul[class]{list-style:none;padding:0}
img,svg{max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
table{border-collapse:collapse}
code,pre{font-family:var(--mono)}

/* --------------------------------------------------- 3. base typography */
body{
  font-family:var(--sans);
  font-size:14px;
  line-height:1.55;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--grotesk);font-weight:700;letter-spacing:-.01em;line-height:1.2}
a{color:var(--navy)}

/* ---------------------------------------- 4. guide section 3: eyebrow */
.eyebrow{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--gold);
}
.eyebrow--rule::before{
  content:"";
  display:inline-block;
  vertical-align:middle;
  width:26px;
  height:1px;
  background:var(--gold);
  margin-right:var(--space-3);
}

/* -------------------------------- 5. guide section 5: status pill base */
.pill{
  font-family:var(--mono);
  font-weight:500;
  font-size:10.5px;
  letter-spacing:.1em;
  text-transform:uppercase;
  padding:4px 10px;
  border-radius:20px;
  border:1px solid var(--line);
  color:var(--muted);
  display:inline-flex;
  align-items:center;
  gap:6px;
  white-space:nowrap;
}

/* ------------------------------------- 6. guide section 5: callout base */
.callout{
  border:1px solid var(--line);
  border-left:3px solid var(--gold);
  border-radius:6px;
  background:var(--paper);
  padding:9px 12px;
  font-size:12.5px;
  line-height:1.55;
}

/* -------------------------------------- 7. guide section 5: button base */
.primary-btn{
  font-family:var(--grotesk);
  font-weight:700;
  font-size:14.5px;
  color:var(--white);
  background:var(--navy);
  border:0;
  border-radius:8px;
  padding:12px 18px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:var(--space-2);
  text-decoration:none;
}
.ghost-btn{
  font-family:var(--grotesk);
  font-weight:600;
  font-size:13px;
  color:var(--navy);
  background:var(--white);
  border:1px solid var(--line);
  border-radius:7px;
  padding:7px 12px;
  display:inline-flex;
  align-items:center;
  gap:var(--space-2);
}
.link-btn{
  font-family:var(--grotesk);
  font-weight:600;
  font-size:13px;
  color:var(--navy);
  background:none;
  border:0;
  padding:0;
  text-decoration:underline;
  text-underline-offset:3px;
}

/* ------------------------------- 8. guide section 11: a11y primitives */
[hidden]{display:none!important}

.sr-only{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}

/* Icon convention: 24x24 viewBox, 1.75px stroke, currentColor, round joins.
   Set once here so every <use> inherits it. */
.icon{
  width:16px;height:16px;
  display:block;
  fill:none;
  stroke:currentColor;
  stroke-width:1.75;
  stroke-linecap:round;
  stroke-linejoin:round;
  flex:0 0 auto;
}

/* ------------------------------- 9. guide section 10: motion damper */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
}