/* ============================================================================
   ResponseMate design system: token layer.
   Source of truth: .mdd/design/handoff/DESIGN_TOKENS.md (v4 bundle) and
   .mdd/docs/00-design-system.md. Values are literal from the handoff.
   No component may use a hex literal that exists here; use the variable.
   ========================================================================== */

/* ---- Self-hosted fonts (EU/GDPR: no Google Fonts CDN) --------------------- */

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../../fonts/rm/plus-jakarta-sans-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../../fonts/rm/plus-jakarta-sans-var-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url('../../fonts/rm/figtree-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url('../../fonts/rm/figtree-var-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../../fonts/rm/ibm-plex-mono-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../../fonts/rm/ibm-plex-mono-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../../fonts/rm/ibm-plex-mono-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../../fonts/rm/ibm-plex-mono-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---- Tokens ---------------------------------------------------------------- */

:root {
  /* Brand */
  --rm-green: #12A87A;          /* primary actions, positive data */
  --rm-green-deep: #0B8A63;     /* primary hover, approved state */
  --rm-forest: #164E38;         /* hero gradient end */
  --rm-ink-teal: #0B1B2B;       /* hero gradient start */
  --rm-ai-cobalt: #2F6BFF;      /* AI actions, assistant */
  --rm-ai-cobalt-deep: #1E4FD1;
  --rm-ai-cyan: #12B5D6;        /* AI gradient, avatars */
  --rm-ai-violet: #7A5AF8;      /* AI marks in content */
  --rm-mint: #7FE3B6;           /* accent text on dark */
  --rm-nav-black: #0A0E17;      /* top navigation bar */
  --rm-module: #6A45E0;         /* every module chip, always */
  --rm-danger: #E11D48;         /* destructive buttons */
  --rm-danger-deep: #B4123F;    /* destructive hover */

  /* Neutrals (cool-toned) */
  --rm-ink: #0E1525;            /* primary text */
  --rm-slate: #2A3342;          /* body text */
  --rm-muted: #5A6577;          /* secondary text */
  --rm-soft: #8A94A6;           /* tertiary text */
  --rm-faint: #B4BECC;          /* disabled */
  --rm-label: #95A0B2;          /* uppercase labels */
  --rm-placeholder: #AEB6C2;    /* input placeholders, empty dates */
  --rm-border: #E7ECF3;         /* hairline borders */
  --rm-fill: #F1F4F9;           /* subtle fills */
  --rm-page: #F4F6FB;           /* page background */
  --rm-ghost-fill: #F6F8FC;     /* ghost buttons, quiet rows */

  /* Inputs */
  --rm-input-border: #E2E7F0;
  --rm-input-bg: #FBFCFE;
  --rm-focus-ring: 0 0 0 3px rgba(18, 168, 122, .14);

  /* Data / category palette */
  --rm-data-green: #12A87A;
  --rm-data-cyan: #0EA5C4;
  --rm-data-blue: #2F6BFF;
  --rm-data-violet: #7A5AF8;
  --rm-data-amber: #F0A93B;
  --rm-data-coral: #E86A6A;
  --rm-data-emerald: #12855A;
  --rm-data-orange: #D97814;

  /* Status pill tones (fg / bg / border) */
  --rm-tone-green-fg: #0B6E4C;    --rm-tone-green-bg: #E7F7F0;    --rm-tone-green-bd: #C6EDD9;
  --rm-tone-amber-fg: #8A5A0B;    --rm-tone-amber-bg: #FDF3E7;    --rm-tone-amber-bd: #F5DFBA;
  --rm-tone-rose-fg: #B4123F;     --rm-tone-rose-bg: #FEECEF;     --rm-tone-rose-bd: #FBD5DC;
  --rm-tone-cobalt-fg: #1E4FD1;   --rm-tone-cobalt-bg: #EBF1FF;   --rm-tone-cobalt-bd: #D5E3FF;
  --rm-tone-violet-fg: #5B3EE0;   --rm-tone-violet-bg: #F3EEFF;   --rm-tone-violet-bd: #E2D6FB;
  --rm-tone-cyan-fg: #0E7C93;     --rm-tone-cyan-bg: #E2F7FB;     --rm-tone-cyan-bd: #BCEAF3;
  --rm-tone-neutral-fg: #5A6577;  --rm-tone-neutral-bg: #F6F8FC;  --rm-tone-neutral-bd: #EEF1F7;

  /* Source types (fixed icon + color, never re-keyed) */
  --rm-src-qna-fg: #5B4BD6;    --rm-src-qna-bg: #EFECFE;    --rm-src-qna-bd: #DCD6FB;    /* messages-square */
  --rm-src-file-fg: #1E50C8;   --rm-src-file-bg: #EAF0FE;   --rm-src-file-bd: #CFDDFA;   /* file-text */
  --rm-src-link-fg: #0E86C4;   --rm-src-link-bg: #E4F4FC;   --rm-src-link-bd: #C3E4F5;   /* link */
  --rm-src-past-fg: #0F8A7E;   --rm-src-past-bg: #E3F5F1;   --rm-src-past-bd: #BEE6DE;   /* clipboard-check */

  /* Gradients */
  --rm-hero-gradient: linear-gradient(118deg, #0B1B2B 0%, #0F2A2A 46%, #164E38 100%);
  --rm-hero-border: #0C2620;
  --rm-hero-hub: #123A30;                 /* progress ring hub, avatar overlap ring */
  --rm-grad-primary: linear-gradient(120deg, #12A87A, #0B8A63);
  --rm-grad-ai: linear-gradient(120deg, #2F6BFF, #1E4FD1);
  --rm-grad-ai-violet: linear-gradient(120deg, #7A5AF8, #5B3EE0);
  --rm-grad-mark: linear-gradient(135deg, #2F6BFF, #12B5D6);

  /* Typography */
  --rm-font-heading: 'Plus Jakarta Sans', sans-serif;
  --rm-font-body: 'Figtree', sans-serif;
  --rm-font-mono: 'IBM Plex Mono', monospace;

  /* Radius: 8 chips, 11 inputs, 13 icon tiles, 16 cards, 20 hero, 999 pills */
  --rm-radius-chip: 8px;
  --rm-radius-input: 11px;
  --rm-radius-tile: 13px;
  --rm-radius-card: 16px;
  --rm-radius-hero: 20px;
  --rm-radius-pill: 999px;

  /* Elevation */
  --rm-shadow-resting: 0 1px 2px rgba(14, 21, 37, .04);
  --rm-shadow-lifted: 0 16px 32px -20px rgba(14, 21, 37, .32);
  --rm-shadow-overlay: 0 22px 50px -18px rgba(14, 21, 37, .5);

  /* Spacing (4px base) */
  --rm-sp-1: 4px;
  --rm-sp-2: 8px;
  --rm-sp-3: 12px;
  --rm-sp-4: 16px;
  --rm-sp-6: 24px;
  --rm-sp-8: 32px;

  /* Layout: ONE page frame for every page (2026-08-18). Width fits three
     340px+ cards per row (grids cap at three columns); the top/bottom
     gutters are the same on every screen, so heroes never touch the top bar
     and pages never end flush. 1180 -> 1280 on 2026-08-19 (the knowledge
     hero's title block + three actions and its three stat tiles need a
     1144px inner width to sit on one row), 1280 -> 1440 later the same day
     to use more of a typical desktop screen without going full-bleed:
     tables and three-card rows get the room, line lengths stay readable. */
  --rm-container-max: 1440px;
  --rm-container-pad: 40px;
  --rm-topbar-h: 66px;
  --rm-page-top: 26px;
  --rm-page-bottom: 60px;

  /* Motion */
  --rm-ease-fast: .14s ease;
  --rm-ease: .16s ease;

  /* Z-index bands: primary modals 250-290, modal-from-modal 420-460,
     confirmations/destructive 520-560 (always topmost) */
  --rm-z-modal: 250;
  --rm-z-modal-2: 420;
  --rm-z-confirm: 520;
  --rm-z-tip: 700; /* tooltips float above every modal layer */
  --rm-z-fmtbar: 650;            /* rich-text formatting bar: above modals, under tooltips */
}

/* ---- Base reset ------------------------------------------------------------
   Metronic used to carry the browser reset; since the M8 teardown nothing
   did, so the UA defaults leaked through: body's 8px margin showed as a white
   gap around the top bar, and anything rendered outside .rm-page (the
   assistant panel, toasts) fell back to the browser serif. Every surface is
   on the rm layer now, so the body font is the design font. */
/* Every design source (.dc.html) sets *{box-sizing:border-box}; Metronic used
   to supply it and its teardown left width:100% + padding elements overflowing
   their parents (modal strips, tiles, inputs). Restored 2026-08-18. */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--rm-font-body);
  color: var(--rm-ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
button, input, select, textarea { font-family: inherit; }
/* Buttons are fully styled by their .rm-* class; strip the UA chrome so a
   classed button (menu items, chips, icon buttons) never shows a stray
   border or grey fill. */
button { border: 0; background: transparent; padding: 0; margin: 0; color: inherit; font: inherit; cursor: pointer; text-align: inherit; }
button:disabled { cursor: default; }