/* ============================================================
   VerifyMy Design System — Tokens for the Moderation Monitor
   Mirrors verifymy-design-system/project/colors_and_type.css
   Load this FIRST, before any page-specific stylesheet.
   ============================================================ */

@font-face {
  font-family: 'Codec Pro';
  src: url('/static/fonts/Codec-Pro-Light.woff2') format('woff2');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Codec Pro';
  src: url('/static/fonts/Codec-Pro-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Codec Pro';
  src: url('/static/fonts/Codec-Pro-News.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Codec Pro';
  src: url('/static/fonts/Codec-Pro-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Codec Pro';
  src: url('/static/fonts/Codec-Pro-Extrabold.woff2') format('woff2');
  font-weight: 800; font-style: normal; font-display: swap;
}

:root {
  /* ---------- Brand: teal ---------- */
  --vm-teal-100: #EAF6F6;
  --vm-teal-200: #B9DFDF;
  --vm-teal-300: #93CFCF;
  --vm-teal-400: #73C0BF;
  --vm-teal-500: #00B3AB;
  --vm-teal-600: #408D8C;
  --vm-teal-700: #306A69;
  --vm-teal-800: #1E3E3E;
  --vm-teal-900: #0E1F1F;

  /* ---------- Accents ---------- */
  --vm-pink-100: #FBEBF2;
  --vm-pink-600: #AC3C6F;
  --vm-pink-700: #812D53;
  --vm-yellow-100: #FDF8ED;
  --vm-yellow-600: #B48536;
  --vm-yellow-700: #926B28;
  --vm-blue-100: #E7F4FD;
  --vm-blue-600: #0672CB;
  --vm-blue-700: #0063B8;

  /* ---------- Neutrals ---------- */
  --vm-white: #FFFFFF;
  --vm-gray-100: #F3F3F3;
  --vm-gray-200: #E6E6E6;
  --vm-gray-300: #CECECE;
  --vm-gray-400: #919191;
  --vm-gray-500: #696969;
  --vm-gray-600: #444444;
  --vm-gray-700: #333232;
  --vm-gray-800: #1E1E1E;
  --vm-gray-900: #0E0E0E;
  --vm-black:    #000000;

  /* ---------- Semantic ---------- */
  --vm-red-100: #FEF9F9;
  --vm-red-200: #F6D2D2;
  --vm-red-600: #D21C1C;
  --vm-red-700: #A81616;
  --vm-red-800: #7E1111;
  --vm-green-100: #E2F9E5;
  --vm-green-200: #BDE6C2;
  --vm-green-600: #1D892B;
  --vm-green-700: #176E22;
  --vm-green-800: #11521A;
  --vm-warn-100: #FDF4E9;
  --vm-warn-200: #FCE9D3;
  --vm-warn-600: #EF9021;
  --vm-warn-700: #BF731A;
  --vm-warn-800: #884F0D;

  /* ---------- Semantic tokens ---------- */
  --vm-fg:           var(--vm-gray-900);
  --vm-fg-body:      var(--vm-gray-700);
  --vm-fg-muted:     var(--vm-gray-500);
  --vm-fg-subtle:    var(--vm-gray-400);
  --vm-fg-on-brand:  var(--vm-gray-900);
  --vm-fg-inverse:   var(--vm-white);
  --vm-bg:           var(--vm-white);
  --vm-bg-subtle:    var(--vm-gray-100);
  --vm-bg-muted:     var(--vm-gray-200);
  --vm-bg-inverse:   var(--vm-gray-900);
  --vm-border:       var(--vm-gray-300);
  --vm-border-strong:var(--vm-gray-500);
  --vm-border-focus: var(--vm-gray-900);
  --vm-accent:       var(--vm-teal-400);
  --vm-accent-hover: var(--vm-teal-600);
  --vm-accent-text:  var(--vm-teal-700);
  --vm-danger:       var(--vm-red-600);
  --vm-success:      var(--vm-green-600);
  --vm-warning:      var(--vm-warn-600);

  /* ---------- Type ---------- */
  --vm-font-sans:  'Codec Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --vm-font-mono:  ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;

  --vm-fs-h1: 32px;
  --vm-fs-h2: 24px;
  --vm-fs-h3: 20px;
  --vm-fs-body: 14px;
  --vm-fs-body-sm: 13px;
  --vm-fs-footnote: 12px;
  --vm-fs-eyebrow: 11px;

  --vm-lh-heading: 1.3;
  --vm-lh-body: 1.5;
  --vm-lh-tight: 1.4;

  --vm-fw-light: 300;
  --vm-fw-regular: 400;
  --vm-fw-news: 500;
  --vm-fw-bold: 700;
  --vm-fw-extrabold: 800;

  --vm-ls-eyebrow: 0.1em;
  --vm-ls-display: -0.02em;

  /* ---------- Spacing (4pt) ---------- */
  --vm-space-1: 4px;
  --vm-space-2: 8px;
  --vm-space-3: 12px;
  --vm-space-4: 16px;
  --vm-space-5: 24px;
  --vm-space-6: 32px;
  --vm-space-7: 40px;
  --vm-space-8: 48px;

  /* ---------- Radius ---------- */
  --vm-radius-sm: 2px;
  --vm-radius-md: 4px;
  --vm-radius-lg: 8px;
  --vm-radius-pill: 40px;

  /* ---------- Borders ---------- */
  --vm-border-w-1: 1px;
  --vm-border-w-2: 2px;

  /* ---------- Shadows ---------- */
  --vm-shadow-none: none;
  --vm-shadow-sm: 0 1px 2px rgba(14,14,14,0.06);
  --vm-shadow-md: 0 4px 12px rgba(14,14,14,0.08);
  --vm-shadow-lg: 0 8px 28px rgba(14,14,14,0.12);
  --vm-shadow-focus: 0 0 0 3px rgba(115,192,191,0.45);

  /* ---------- Motion ---------- */
  --vm-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --vm-dur-fast: 120ms;
  --vm-dur-med:  200ms;
  --vm-dur-slow: 320ms;
}

/* ============================================================
   Base + utility classes (small set — most styling lives in
   page CSS that reads the tokens above).
   ============================================================ */

html { font-family: var(--vm-font-sans); color: var(--vm-fg-body); }

/* Helper: use monospace for IDs, frame numbers, code-like values. */
.mono { font-family: var(--vm-font-mono); }

/* Branded header bar: logo + title + actions. */
.vm-app-bar {
  display: flex;
  align-items: center;
  gap: var(--vm-space-4);
  padding: 12px var(--vm-space-5);
  background: var(--vm-white);
  border-bottom: 1px solid var(--vm-gray-200);
  flex-shrink: 0;
}
.vm-app-bar .vm-logo {
  height: 24px; width: auto; display: block;
  flex-shrink: 0;
}
.vm-app-bar .vm-divider {
  width: 1px; height: 20px; background: var(--vm-gray-300);
  flex-shrink: 0;
}
.vm-app-bar .vm-title {
  font-family: var(--vm-font-sans);
  font-weight: var(--vm-fw-news);
  font-size: var(--vm-fs-body);
  letter-spacing: 0.04em;
  color: var(--vm-gray-900);
  text-transform: uppercase;
  white-space: nowrap;
}
.vm-app-bar .vm-spacer { flex: 1; }

/* Branded nav link in app bar (small pill). */
.vm-app-bar .vm-nav-link {
  font-family: var(--vm-font-sans);
  font-size: 13px;
  font-weight: var(--vm-fw-bold);
  color: var(--vm-gray-700);
  text-decoration: none;
  padding: 6px 12px;
  border-radius: var(--vm-radius-md);
  border: 1px solid transparent;
  transition: background var(--vm-dur-fast) var(--vm-ease-standard),
              color var(--vm-dur-fast) var(--vm-ease-standard),
              border-color var(--vm-dur-fast) var(--vm-ease-standard);
}
.vm-app-bar .vm-nav-link:hover {
  background: var(--vm-teal-100);
  color: var(--vm-teal-700);
}
.vm-app-bar .vm-nav-link.active {
  background: var(--vm-teal-200);
  color: var(--vm-teal-800);
}

/* Eyebrow (uppercase 10% tracking). */
.vm-eyebrow {
  font-family: var(--vm-font-sans);
  font-weight: var(--vm-fw-extrabold);
  font-size: var(--vm-fs-eyebrow);
  line-height: var(--vm-lh-body);
  letter-spacing: var(--vm-ls-eyebrow);
  text-transform: uppercase;
  color: var(--vm-fg-muted);
}