/* ─────────────────────────────────────────────────────────────────────────
   Agenvia Design System — foundations
   Import this once per page:
     <link rel="stylesheet" href="/colors_and_type.css">
   ───────────────────────────────────────────────────────────────────────── */

/* Self-hosted fonts. Files live under /fonts. */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/InterTight-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/InterTight-Medium.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/InterTight-SemiBold.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/JetBrainsMono-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/JetBrainsMono-Medium.woff2') format('woff2');
}

:root {
  /* ── Core palette ─────────────────────────────────────────── */
  --ink:         #0B0F0E;   /* warm near-black, primary fg       */
  --ink-2:       #1A1F1D;   /* one step lighter — inverse cards  */
  --paper:       #F6F5F0;   /* warm off-white, primary bg        */
  --paper-2:     #EFEDE6;   /* one step deeper — card fill       */
  --paper-3:     #E6E4DB;   /* two steps — subdued surfaces      */
  --graphite:    #5A5F5C;   /* secondary text, hairlines         */
  --graphite-2:  #8A8F8C;   /* tertiary text, placeholders       */
  --fog:         #D5D3CA;   /* dividers, inert borders           */

  /* ── Semantic signal palette ──────────────────────────────── */
  --signal-green:   #12B981;   /* Allow / OK                    */
  --signal-green-2: #E6F6EF;   /* Allow pill bg                 */
  --amber:          #D97706;   /* Sanitize / Minimize / Challenge */
  --amber-2:        #FBEFDA;   /* Amber pill bg                 */
  --crimson:        #B91C1C;   /* Block / Denied                */
  --crimson-2:      #F7E1E1;   /* Crimson pill bg               */
  --indigo:         #2948A6;   /* Info / neutral signal         */
  --indigo-2:       #E1E7F5;   /* Info pill bg                  */

  /* ── Semantic aliases ─────────────────────────────────────── */
  --fg-1:        var(--ink);         /* primary text             */
  --fg-2:        var(--graphite);    /* secondary text           */
  --fg-3:        var(--graphite-2);  /* tertiary text            */
  --bg-1:        var(--paper);       /* page bg                  */
  --bg-2:        var(--paper-2);     /* card bg                  */
  --bg-3:        var(--paper-3);     /* subdued bg               */
  --border-1:    rgb(90 95 92 / 0.2);     /* default hairline   */
  --border-2:    rgb(90 95 92 / 0.35);    /* emphasis hairline  */
  --border-strong: var(--ink);

  /* ── Type ─────────────────────────────────────────────────── */
  --font-sans: 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Base type scale — compact, never shouting */
  --fs-xs:   11px;   --lh-xs:   16px;
  --fs-sm:   13px;   --lh-sm:   18px;
  --fs-base: 15px;   --lh-base: 22px;
  --fs-md:   17px;   --lh-md:   24px;
  --fs-lg:   20px;   --lh-lg:   28px;
  --fs-xl:   24px;   --lh-xl:   30px;
  --fs-2xl:  32px;   --lh-2xl:  38px;
  --fs-3xl:  44px;   --lh-3xl:  50px;

  --tracking-tight:  -0.02em;
  --tracking-normal:  0;
  --tracking-mono:    0;
  --tracking-caps:    0.08em;

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold: 600;

  /* ── Spacing — 4px base ───────────────────────────────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ── Radii ────────────────────────────────────────────────── */
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 10px;
  --r-xl: 14px;
  --r-2xl: 20px;
  --r-full: 9999px;    /* avatars and status dots ONLY */

  /* ── Shadow — layered elevation scale ─────────────────────── */
  --shadow-modal: 0 1px 0 rgb(0 0 0 / 0.04), 0 8px 24px -12px rgb(0 0 0 / 0.16);
  --shadow-sm: 0 1px 2px rgb(11 15 14 / 0.05), 0 1px 3px rgb(11 15 14 / 0.06);
  --shadow-md: 0 2px 4px rgb(11 15 14 / 0.04), 0 10px 22px -8px rgb(11 15 14 / 0.12);
  --shadow-lg: 0 4px 10px rgb(11 15 14 / 0.05), 0 22px 40px -14px rgb(11 15 14 / 0.18);
  --shadow-accent: 0 6px 18px -6px rgb(18 185 129 / 0.42);
  --ring: 0 0 0 3px rgb(18 185 129 / 0.16);
  --ring-ink: 0 0 0 3px rgb(11 15 14 / 0.12);

  /* ── Motion ───────────────────────────────────────────────── */
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --dur-fast: 80ms;
  --dur: 120ms;
  --dur-slow: 200ms;
}

/* ─────────────────────────────────────────────────────────────────────────
   Base semantic styles
   ───────────────────────────────────────────────────────────────────────── */
html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }

body {
  margin: 0;
  background: var(--bg-1);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  font-weight: var(--weight-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv11";
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  color: var(--fg-1);
  margin: 0;
  letter-spacing: var(--tracking-tight);
}

h1 { font-size: var(--fs-3xl); line-height: var(--lh-3xl); font-weight: var(--weight-semibold); }
h2 { font-size: var(--fs-2xl); line-height: var(--lh-2xl); }
h3 { font-size: var(--fs-xl);  line-height: var(--lh-xl); }
h4 { font-size: var(--fs-lg);  line-height: var(--lh-lg); }
h5 { font-size: var(--fs-md);  line-height: var(--lh-md); }
h6 {
  font-size: var(--fs-xs); line-height: var(--lh-xs);
  text-transform: uppercase; letter-spacing: var(--tracking-caps);
  color: var(--fg-2); font-weight: var(--weight-medium);
}

p { margin: 0 0 var(--space-4); color: var(--fg-1); }

a {
  color: inherit;
  text-decoration: none;
  text-underline-offset: 3px;
  transition: color var(--dur) var(--ease);
}
a:hover { text-decoration: underline; }
a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: var(--r-xs); }

code, kbd, samp, pre, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
  font-feature-settings: "zero", "ss02";
}

code:not(pre code) {
  background: var(--bg-2);
  border: 1px solid var(--border-1);
  border-radius: var(--r-xs);
  padding: 1px 5px;
  color: var(--fg-1);
}

pre {
  background: var(--ink);
  color: var(--paper);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--r-md);
  overflow-x: auto;
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
}

hr {
  border: 0;
  border-top: 1px solid var(--border-1);
  margin: var(--space-6) 0;
}

::selection { background: var(--ink); color: var(--paper); }

/* ─────────────────────────────────────────────────────────────────────────
   Utility classes
   ───────────────────────────────────────────────────────────────────────── */
.mono { font-family: var(--font-mono); }
.eyebrow {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--fg-2);
  font-weight: var(--weight-medium);
}

.hairline { border-top: 1px solid var(--border-1); }
.grid-bg {
  background-image: radial-gradient(circle, rgb(90 95 92 / 0.12) 1px, transparent 1px);
  background-size: 24px 24px;
  background-position: 0 0;
}

/* Outcome pills — the semantic state vocabulary */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  line-height: 1;
  padding: 4px 8px;
  border-radius: var(--r-xs);
  border: 1px solid transparent;
  font-weight: var(--weight-medium);
  letter-spacing: 0;
}
.pill::before {
  content: ""; width: 6px; height: 6px; border-radius: var(--r-full);
  background: currentColor; display: inline-block;
}
.pill-allow    { background: var(--signal-green-2); color: #0A7F5A; border-color: rgb(18 185 129 / 0.25); }
.pill-sanitize { background: var(--amber-2);        color: #8A4A03; border-color: rgb(217 119 6 / 0.25); }
.pill-block    { background: var(--crimson-2);      color: #7C1212; border-color: rgb(185 28 28 / 0.25); }
.pill-info     { background: var(--indigo-2);       color: #1E3478; border-color: rgb(41 72 166 / 0.25); }
.pill-neutral  { background: var(--bg-2);           color: var(--fg-2); border-color: var(--border-1); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: var(--weight-medium);
  line-height: 1;
  padding: 12px 20px;
  border-radius: var(--r-lg);
  border: 1px solid var(--border-strong);
  background: var(--ink);
  color: var(--paper);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.btn:hover { background: var(--ink-2); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn:active { transform: translateY(0); box-shadow: var(--shadow-sm); }
.btn:focus-visible { outline: none; box-shadow: var(--shadow-sm), var(--ring-ink); }

.btn-secondary {
  background: var(--paper); color: var(--ink);
  border-color: var(--border-2);
  box-shadow: var(--shadow-sm);
}
.btn-secondary:hover { background: var(--paper-2); border-color: var(--ink); }

.btn-ghost {
  background: transparent; color: var(--fg-2);
  border-color: transparent;
  box-shadow: none;
}
.btn-ghost:hover { background: var(--paper-2); color: var(--ink); transform: none; box-shadow: none; }

/* Inputs */
.input {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  padding: 13px 14px;
  border: 1px solid var(--border-2);
  border-radius: var(--r-lg);
  background: var(--paper);
  color: var(--fg-1);
  width: 100%;
  box-shadow: var(--shadow-sm);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.input::placeholder { color: var(--fg-3); }
.input:hover { border-color: var(--border-strong); }
.input:focus { outline: none; border-color: var(--signal-green); box-shadow: var(--ring); }

/* Cards */
.card {
  background: var(--bg-1);
  border: 1px solid var(--border-1);
  border-radius: var(--r-md);
  padding: var(--space-5);
}
.card-inset { background: var(--bg-2); }