/* ============================================================
   iFusion Design System — colors_and_type.css
   Source of truth for color, type, spacing, radii, motion.

   Derived from the iFusion Brand Guidelines v1.
   - Primary blue: #2671F7 ("trust, reliability, clarity")
   - Secondary: near-black + neutral grey
   - Inter variable (self-hosted, brand-supplied); JetBrains Mono for code
   - Heading line-height 1.1×, body line-height 1.4×
   ============================================================ */

/* Inter — self-hosted variable font (wght axis), Latin subset, WOFF2.
   Italics are synthesised by the browser when needed (no italic face shipped). */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter.woff2') format('woff2');
  font-variation-settings: 'opsz' 14;
}

/* JetBrains Mono — self-hosted variable font (wght axis), ASCII subset, WOFF2. */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('../fonts/jetbrains.woff2') format('woff2');
}

:root {

  /* ----------------------------------------------------------
     COLOR — Brand
     ---------------------------------------------------------- */

  /* Primary / Blue — 10-step scale anchored on #2671F7 at 500 */
  --blue-50:  #EAF1FE;
  --blue-100: #C5D9FC;
  --blue-200: #8FB6F9;
  --blue-300: #5894F8;
  --blue-400: #3B82F7;
  --blue-500: #2671F7;   /* PRIMARY — brand blue */
  --blue-600: #1C5BD6;
  --blue-700: #1748A8;
  --blue-800: #123781;
  --blue-900: #0D285C;
  --blue-950: #071836;

  /* Secondary / Near-black */
  --dark-50:  #E9ECEF;
  --dark-100: #CED4DA;
  --dark-200: #9AA2AD;
  --dark-300: #6B7280;
  --dark-400: #4B5563;
  --dark-500: #334155;
  --dark-600: #27313F;
  --dark-700: #1C2431;
  --dark-800: #141B25;
  --dark-900: #0C1118;
  --dark-950: #070A0F;

  /* Neutral / Grey */
  --grey-50:  #F6F7F8;
  --grey-100: #E9EBEE;
  --grey-200: #D6DAE0;
  --grey-300: #B9BFC8;
  --grey-400: #97A0AC;
  --grey-500: #7C8593;
  --grey-600: #626A77;
  --grey-700: #4F5661;
  --grey-800: #3B414A;
  --grey-900: #262A31;
  --grey-950: #14171B;

  /* Semantic — Apple system colors (iOS light) */
  --success-500: #34C759;   /* systemGreen */
  --success-100: #E6F7EA;
  --warning-500: #FF9500;   /* systemOrange */
  --warning-100: #FFF1DC;
  --danger-500:  #FF3B30;   /* systemRed */
  --danger-100:  #FFE5E3;
  --info-500:    var(--blue-500);
  --info-100:    var(--blue-50);

  /* ----------------------------------------------------------
     COLOR — Semantic aliases used by components
     ---------------------------------------------------------- */

  --paper:        #FFFFFF;
  --surface-0:    #FFFFFF;
  --surface-1:    var(--grey-50);
  --surface-2:    var(--grey-100);
  --surface-3:    var(--grey-200);

  --ink:          var(--dark-800);
  --ink-strong:   var(--dark-900);
  --ink-muted:    var(--dark-500);
  --ink-subtle:   var(--grey-600);
  --ink-faint:    var(--grey-400);

  --border:       var(--grey-200);
  --border-strong:var(--grey-300);
  --divider:      var(--grey-100);

  --fg-1: var(--ink-strong);
  --fg-2: var(--ink);
  --fg-3: var(--ink-muted);
  --fg-4: var(--ink-subtle);
  --fg-5: var(--ink-faint);

  --bg:           var(--paper);
  --bg-elev-1:    var(--surface-0);
  --bg-elev-2:    var(--surface-1);

  /* Accent = primary blue */
  --accent:        var(--blue-500);
  --accent-hover:  var(--blue-600);
  --accent-press:  var(--blue-700);
  --accent-soft:   var(--blue-50);
  --accent-on:     #FFFFFF;
  --accent-ring:   rgba(38, 113, 247, 0.35);

  /* Selection */
  --selection-bg:  var(--blue-100);
  --selection-fg:  var(--dark-900);

  /* ----------------------------------------------------------
     GRADIENTS — brand-sanctioned
     ---------------------------------------------------------- */
  --gradient-blue:    linear-gradient(90deg, var(--blue-100) 0%, var(--blue-500) 100%);
  --gradient-neutral: linear-gradient(90deg, var(--grey-200) 0%, var(--dark-800) 100%);
  --gradient-brand:   linear-gradient(90deg, var(--blue-500) 0%, var(--dark-800) 100%);
  /* Diagonal variants for hero treatments */
  --gradient-blue-diag:  linear-gradient(135deg, var(--blue-400) 0%, var(--blue-700) 100%);
  --gradient-brand-diag: linear-gradient(135deg, var(--blue-500) 0%, var(--dark-900) 100%);

  /* ----------------------------------------------------------
     TYPOGRAPHY — Inter, tight display tracking
     Heading line-height = 1.1×, body line-height = 1.4×
     ---------------------------------------------------------- */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --font-display: var(--font-sans);

  /* Headings — brand scale (H1 56 / H2 48 / H3 40 / H4 32 / H5 24 / H6 20) */
  --t-h1: 56px;  --lh-h1: 61.6px;  --tr-h1: -0.03em;
  --t-h2: 48px;  --lh-h2: 52.8px;  --tr-h2: -0.025em;
  --t-h3: 40px;  --lh-h3: 44px;    --tr-h3: -0.02em;
  --t-h4: 32px;  --lh-h4: 35.2px;  --tr-h4: -0.02em;
  --t-h5: 24px;  --lh-h5: 26.4px;  --tr-h5: -0.015em;
  --t-h6: 20px;  --lh-h6: 22px;    --tr-h6: -0.01em;

  /* Oversize display — for hero moments (pulled from the typescale reference plate) */
  --t-display-2xl: 96px;  --lh-display-2xl: 1.02; --tr-display-2xl: -0.035em;
  --t-display-xl:  80px;  --lh-display-xl:  1.02; --tr-display-xl:  -0.032em;
  --t-display-lg:  64px;  --lh-display-lg:  1.05; --tr-display-lg:  -0.03em;
  --t-display-md:  var(--t-h1);  --lh-display-md: var(--lh-h1); --tr-display-md: var(--tr-h1);

  /* Body — brand scale (Large 20/28, Medium 18/25.2, Normal 16/22.4, Small 14/19.6) */
  --t-body-lg: 20px;  --lh-body-lg: 28px;
  --t-body-md: 18px;  --lh-body-md: 25.2px;
  --t-body:    16px;  --lh-body:    22.4px;
  --t-body-sm: 14px;  --lh-body-sm: 19.6px;
  --t-caption: 13px;  --lh-caption: 18.2px;
  --t-micro:   10px;  --lh-micro:   14px;
  --t-mono:    14px;  --lh-mono:    20px;

  /* Weights */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* ----------------------------------------------------------
     SPACING — 4px grid
     ---------------------------------------------------------- */
  --s-1:   4px;
  --s-2:   8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-8:  32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;
  --s-24: 96px;
  --s-32: 128px;

  --section-pad-y: var(--s-24);
  --section-pad-x: var(--s-24);

  /* ----------------------------------------------------------
     RADII
     ---------------------------------------------------------- */
  --r-1: 4px;
  --r-2: 8px;    /* inputs, chips, buttons */
  --r-3: 12px;   /* cards */
  --r-4: 20px;   /* hero cards */
  --r-full: 999px;

  /* ----------------------------------------------------------
     SHADOWS
     ---------------------------------------------------------- */
  --shadow-1: 0 1px 2px rgba(12, 17, 24, 0.04), 0 0 0 1px rgba(12, 17, 24, 0.05);
  --shadow-2: 0 6px 20px -8px rgba(12, 17, 24, 0.14), 0 0 0 1px rgba(12, 17, 24, 0.05);
  --shadow-3: 0 16px 40px -12px rgba(12, 17, 24, 0.22), 0 0 0 1px rgba(12, 17, 24, 0.06);
  --shadow-focus: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent-ring);
  --shadow-inset-error: inset 0 0 0 1px var(--danger-500);

  /* ----------------------------------------------------------
     MOTION
     ---------------------------------------------------------- */
  --dur-fast:   120ms;
  --dur-base:   200ms;
  --dur-slow:   320ms;
  --ease-swift: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-spring:cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:    cubic-bezier(0.7, 0, 0.84, 0);

  /* ----------------------------------------------------------
     LAYOUT — Grid per brand spec
     - Desktop HD 1440: 12 cols × 65 + 30 gutter
     - Desktop     1024: 12 cols × 50 + 30 gutter
     - Tablet       768:  6 cols × 88 + 30 gutter
     ---------------------------------------------------------- */
  --content-max:   1200px;
  --content-pad:   var(--s-24);
  --content-pad-mobile: var(--s-6);
  --prose-max:     64ch;
  --grid-gutter:   30px;

  /* Frosted nav */
  --chrome-blur:     20px;
  --chrome-saturate: 180%;
  --chrome-bg:       rgba(255, 255, 255, 0.72);
}

/* Dark theme */
:root.dark {
  --paper:        var(--dark-900);
  --surface-0:    var(--dark-800);
  --surface-1:    var(--dark-700);
  --surface-2:    var(--dark-600);
  --surface-3:    var(--dark-500);
  --ink:          #EFF2F7;
  --ink-strong:   #FFFFFF;
  --ink-muted:    var(--grey-300);
  --ink-subtle:   var(--grey-400);
  --ink-faint:    var(--grey-600);
  --border:       var(--dark-600);
  --border-strong:var(--dark-500);
  --divider:      var(--dark-700);
  --chrome-bg:    rgba(12, 17, 24, 0.72);
}

/* ============================================================
   BASELINE
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg-2);
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'cv11', 'ss01', 'ss03';
}

::selection { background: var(--selection-bg); color: var(--selection-fg); }

/* Headings — brand scale applied by default */
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  color: var(--fg-1);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  text-wrap: balance;
}
h1 { font-size: var(--t-h1); line-height: var(--lh-h1); letter-spacing: var(--tr-h1); }
h2 { font-size: var(--t-h2); line-height: var(--lh-h2); letter-spacing: var(--tr-h2); }
h3 { font-size: var(--t-h3); line-height: var(--lh-h3); letter-spacing: var(--tr-h3); }
h4 { font-size: var(--t-h4); line-height: var(--lh-h4); letter-spacing: var(--tr-h4); }
h5 { font-size: var(--t-h5); line-height: var(--lh-h5); letter-spacing: var(--tr-h5); }
h6 { font-size: var(--t-h6); line-height: var(--lh-h6); letter-spacing: var(--tr-h6); }

/* Display utilities */
.display-2xl { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--t-display-2xl); line-height: var(--lh-display-2xl); letter-spacing: var(--tr-display-2xl); color: var(--fg-1); text-wrap: balance; }
.display-xl  { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--t-display-xl);  line-height: var(--lh-display-xl);  letter-spacing: var(--tr-display-xl);  color: var(--fg-1); text-wrap: balance; }
.display-lg  { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--t-display-lg);  line-height: var(--lh-display-lg);  letter-spacing: var(--tr-display-lg);  color: var(--fg-1); text-wrap: balance; }
.display-md  { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--t-display-md);  line-height: var(--lh-display-md);  letter-spacing: var(--tr-display-md);  color: var(--fg-1); text-wrap: balance; }

/* Body */
p, .body        { font-size: var(--t-body);    line-height: var(--lh-body);    color: var(--fg-2); margin: 0; text-wrap: pretty; }
.body-lg        { font-size: var(--t-body-lg); line-height: var(--lh-body-lg); }
.body-md        { font-size: var(--t-body-md); line-height: var(--lh-body-md); }
.body-sm        { font-size: var(--t-body-sm); line-height: var(--lh-body-sm); }
.caption        { font-size: var(--t-caption); line-height: var(--lh-caption); color: var(--fg-3); }
.eyebrow        { font-size: var(--t-caption); line-height: 1.2; color: var(--fg-3); font-weight: var(--fw-medium); letter-spacing: 0.02em; }

b, strong { font-weight: var(--fw-bold); color: var(--fg-1); }

/* Code */
code, pre, kbd, samp { font-family: var(--font-mono); font-size: var(--t-mono); }
code { background: var(--surface-1); padding: 2px 6px; border-radius: var(--r-1); border: 1px solid var(--border); font-size: 0.92em; }
pre  { background: var(--surface-1); padding: var(--s-4); border-radius: var(--r-2); border: 1px solid var(--border); overflow-x: auto; line-height: 1.55; }
pre code { background: transparent; padding: 0; border: 0; }

/* Links */
a { color: var(--accent); text-decoration: none; text-underline-offset: 0.2em; transition: color var(--dur-fast) var(--ease-swift); }
a:hover { color: var(--accent-hover); text-decoration: none; }
a:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--r-1); }

hr { border: 0; border-top: 1px solid var(--divider); margin: var(--s-8) 0; }

/* Tables */
table { font-variant-numeric: tabular-nums; border-collapse: collapse; width: 100%; }
th, td { text-align: left; padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--divider); }
th { font-weight: var(--fw-medium); color: var(--fg-3); font-size: var(--t-caption); }

/* Focus ring */
:focus-visible { outline: none; }
button:focus-visible, [role="button"]:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  box-shadow: var(--shadow-focus);
}

/* ============================================================
   BUTTON SYSTEM — 5 sizes × 3 variants × 5 colors × states
   Brand spec: rounded rect, .btn-fill / .btn-outline / .btn-ghost
   with modifier color classes. Sizes xs / sm / md / lg / xl.
   ============================================================ */

.btn {
  --_bg: var(--blue-500);
  --_fg: #FFFFFF;
  --_bd: var(--blue-500);
  --_bg-hov: var(--blue-600);
  --_bg-press: var(--blue-700);
  --_ring: var(--accent-ring);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: 10px 16px;
  font-family: var(--font-sans);
  font-size: var(--t-body-sm);
  line-height: 1;
  font-weight: var(--fw-semibold);
  letter-spacing: -0.005em;
  color: var(--_fg);
  background: var(--_bg);
  border: 1px solid var(--_bd);
  border-radius: var(--r-2);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease-swift),
              border-color var(--dur-fast) var(--ease-swift),
              color var(--dur-fast) var(--ease-swift),
              box-shadow var(--dur-fast) var(--ease-swift),
              transform var(--dur-fast) var(--ease-swift);
}
.btn:hover   { background: var(--_bg-hov); border-color: var(--_bg-hov); }
.btn:active  { background: var(--_bg-press); border-color: var(--_bg-press); transform: translateY(0.5px); }
.btn:focus-visible { box-shadow: 0 0 0 3px var(--_ring); }
.btn[disabled], .btn.is-disabled { opacity: 0.45; cursor: not-allowed; pointer-events: none; }

/* Sizes */
.btn--xs { padding: 4px  10px; font-size: 12px; border-radius: var(--r-1); }
.btn--sm { padding: 7px  12px; font-size: 13px; }
.btn--md { padding: 10px 16px; font-size: 14px; }               /* default */
.btn--lg { padding: 12px 20px; font-size: 15px; }
.btn--xl { padding: 16px 24px; font-size: 16px; border-radius: var(--r-3); }

.btn--block { display: flex; width: 100%; }
.btn--icon-only { padding: 10px; aspect-ratio: 1/1; }
.btn--icon-only.btn--xs { padding: 6px; }
.btn--icon-only.btn--sm { padding: 8px; }
.btn--icon-only.btn--lg { padding: 12px; }
.btn--icon-only.btn--xl { padding: 14px; }
.btn--circle { border-radius: 999px; }

/* Color modifiers — fill variant */
/* AA: white-on-blue at blue-500 is only 4.39:1; use blue-600 base so it clears 4.5:1. */
.btn--blue  { --_bg: var(--blue-600);  --_bd: var(--blue-600);  --_bg-hov: var(--blue-700);  --_bg-press: var(--blue-800); --_ring: rgba(38,113,247,0.35); --_fg: #fff; }
.btn--dark  { --_bg: var(--dark-800);  --_bd: var(--dark-800);  --_bg-hov: var(--dark-900);  --_bg-press: #000;            --_ring: rgba(12,17,24,0.30);   --_fg: #fff; }
.btn--green { --_bg: #15803D;           --_bd: #15803D;           --_bg-hov: #14532D;           --_bg-press: #0F3F21;          --_ring: rgba(21,128,61,0.30); --_fg: #fff; }
.btn--red   { --_bg: var(--danger-500); --_bd: var(--danger-500); --_bg-hov: #E0332A;           --_bg-press: #C02B23;          --_ring: rgba(255,59,48,0.30); --_fg: #fff; }
.btn--white { --_bg: #FFFFFF;           --_bd: var(--border);     --_bg-hov: var(--grey-50);    --_bg-press: var(--grey-100);  --_ring: rgba(12,17,24,0.12);  --_fg: var(--fg-1); }

/* Variant: outline */
.btn--outline           { background: transparent; color: var(--_bd); }
.btn--outline:hover     { background: color-mix(in srgb, var(--_bd) 8%, transparent); }
.btn--outline:active    { background: color-mix(in srgb, var(--_bd) 14%, transparent); }
.btn--outline.btn--white{ background: #FFF; color: var(--fg-1); border-color: var(--border); }
.btn--outline.btn--white:hover { background: var(--grey-50); border-color: var(--border-strong); }

/* Variant: ghost (text button, no border) */
.btn--ghost         { background: transparent; color: var(--_bd); border-color: transparent; }
.btn--ghost:hover   { background: color-mix(in srgb, var(--_bd) 8%, transparent); }
.btn--ghost:active  { background: color-mix(in srgb, var(--_bd) 14%, transparent); }
.btn--ghost.btn--white { color: var(--fg-1); }

/* ============================================================
   BUTTON GROUP — segmented & split
   All variants share a 36px control height so they line up when placed side-by-side.
   ============================================================ */
.btn-group {
  display: inline-flex;
  height: 36px;
  border-radius: var(--r-2);
  background: var(--surface-1);
  padding: 3px;
  gap: 2px;
  border: 1px solid var(--border);
}
.btn-group .seg {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--fg-3);
  border: 0;
  padding: 0 14px;
  min-width: 64px;
  font-family: var(--font-sans);
  font-size: var(--t-body-sm);
  font-weight: var(--fw-medium);
  border-radius: calc(var(--r-2) - 3px);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-swift), color var(--dur-fast) var(--ease-swift);
}
.btn-group .seg:hover { color: var(--fg-1); }
.btn-group .seg[aria-selected="true"], .btn-group .seg.is-active {
  background: var(--surface-0);
  color: var(--fg-1);
  box-shadow: var(--shadow-1);
}
.btn-group.is-dark {
  background: var(--dark-800);
  border-color: var(--dark-500);
}
.btn-group.is-dark .seg { color: var(--grey-300); }
.btn-group.is-dark .seg:hover { color: #FFF; }
.btn-group.is-dark .seg[aria-selected="true"], .btn-group.is-dark .seg.is-active {
  background: var(--dark-500);
  color: #FFF;
  box-shadow: 0 1px 2px rgba(0,0,0,0.45), inset 0 0 0 1px rgba(255,255,255,0.06);
}

/* Pager (prev/next arrows in a group) — icons centered in a fixed square cell */
.btn-pager { display: inline-flex; height: 36px; border: 1px solid var(--border); border-radius: var(--r-2); overflow: hidden; background: var(--surface-0); }
.btn-pager .seg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--fg-2);
}
.btn-pager .seg + .seg { border-left: 1px solid var(--border); }
.btn-pager .seg:hover { background: var(--surface-1); }
.btn-pager.is-dark { background: var(--dark-800); border-color: var(--dark-500); }
.btn-pager.is-dark .seg { color: #FFF; }
.btn-pager.is-dark .seg + .seg { border-left-color: var(--dark-500); }
.btn-pager.is-dark .seg:hover { background: var(--dark-600); }

/* Split action: label + count/icon divided
   .main is a 3-column grid (icon | label | spacer). The label sits in the
   center column so it stays optically centered within the main button regardless
   of whether an icon is present. The trailing spacer mirrors the leading icon width. */
.btn-split {
  display: inline-flex;
  align-items: stretch;
  height: 36px;
  border: 1px solid var(--border);
  border-radius: var(--r-2);
  overflow: hidden;
  background: var(--surface-0);
}
.btn-split .main,
.btn-split .extra {
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: var(--t-body-sm);
  font-weight: var(--fw-semibold);
  color: var(--fg-1);
}
.btn-split .main {
  display: grid;
  grid-template-columns: 16px 1fr 16px;
  align-items: center;
  justify-items: center;
  gap: 8px;
  padding: 0 16px;
  min-width: 140px;
}
/* If the .main has no icon, it collapses to a single centered label cell */
.btn-split .main:not(:has(svg)):not(:has(.icon)) {
  display: inline-flex;
  justify-content: center;
}
.btn-split .main svg,
.btn-split .main .icon { justify-self: start; }
.btn-split .extra {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  padding: 0 14px;
  border-left: 1px solid var(--border);
  color: var(--fg-3);
  font-weight: var(--fw-medium);
  font-variant-numeric: tabular-nums;
}
.btn-split .main:hover, .btn-split .extra:hover { background: var(--surface-1); }
.btn-split.is-dark { background: var(--dark-800); border-color: var(--dark-500); color: #FFF; }
.btn-split.is-dark .main { color: #FFF; }
.btn-split.is-dark .extra { border-left-color: var(--dark-500); color: var(--grey-300); }
.btn-split.is-dark .main:hover, .btn-split.is-dark .extra:hover { background: var(--dark-600); }

/* ============================================================
   INPUT
   ============================================================ */
.input {
  appearance: none;
  background: var(--surface-0);
  border: 1px solid var(--border);
  border-radius: var(--r-2);
  padding: 10px 14px;
  font-family: var(--font-sans);
  font-size: var(--t-body-sm);
  line-height: 1.2;
  color: var(--fg-1);
  transition: border-color var(--dur-fast) var(--ease-swift), box-shadow var(--dur-fast) var(--ease-swift);
  width: 100%;
}
.input::placeholder { color: var(--fg-5); }
.input:hover { border-color: var(--border-strong); }
.input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.input[aria-invalid="true"] { border-color: var(--danger-500); box-shadow: 0 0 0 3px rgba(255,59,48,0.20); }

/* ============================================================
   CARD
   ============================================================ */
.card {
  background: var(--surface-0);
  border: 1px solid var(--border);
  border-radius: var(--r-3);
  padding: var(--s-6);
  transition: box-shadow var(--dur-base) var(--ease-swift), border-color var(--dur-base) var(--ease-swift);
}
.card:hover { box-shadow: var(--shadow-2); }

/* ============================================================
   BADGE / CHIP
   ============================================================ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  font-size: 12px;
  font-weight: var(--fw-medium);
  line-height: 1.4;
  border-radius: var(--r-full);
  background: var(--surface-1);
  color: var(--fg-2);
  border: 1px solid var(--border);
}
.badge--blue    { background: var(--blue-50);    color: var(--blue-700);    border-color: var(--blue-100); }
.badge--dark    { background: var(--dark-800);   color: #FFF;               border-color: var(--dark-800); }
.badge--success { background: var(--success-100); color: #1C7C34;           border-color: #B9E9C2; }
.badge--warning { background: var(--warning-100); color: #8A4A00;           border-color: #FDD8A7; }
.badge--danger  { background: var(--danger-100);  color: #A51C14;           border-color: #FDB8B2; }

/* ============================================================
   LAYOUT HELPERS — grid wrapper
   ============================================================ */
.container { max-width: var(--content-max); margin: 0 auto; padding: 0 var(--content-pad); }
.container--prose { max-width: var(--prose-max); }

.grid-12 { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--grid-gutter); }
.grid-6  { display: grid; grid-template-columns: repeat(6, 1fr);  gap: var(--grid-gutter); }