/* ==========================================================================
   DevMCP — design tokens
   Two themes, both checked for WCAG 2.2 AA contrast on the surfaces they are
   used on. Semantic colours carry meaning in the hero explainer: requests
   travel one way, responses the other, notifications are one-way only.
   ========================================================================== */

@font-face {
  font-family: 'Inter var';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('../fonts/inter-latin-300-800-normal.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: 'Inter var';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('../fonts/inter-latin-ext-300-800-normal.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: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/instrument-serif-latin-400-normal.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: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/instrument-serif-latin-400-italic.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: 'JetBrains Mono var';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/jetbrains-mono-latin-400-700-normal.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;
}

:root {
  /* ---------------------------------------------------------- typography */
  --font-sans: 'Inter var', ui-sans-serif, system-ui, -apple-system, 'Segoe UI',
    Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-display: 'Instrument Serif', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --font-mono: 'JetBrains Mono var', ui-monospace, SFMono-Regular, 'SF Mono',
    Menlo, Consolas, 'Liberation Mono', monospace;

  /* A modest type scale; the display face carries the drama, not the size. */
  --fs-3xs: 0.6875rem;   /* 11px */
  --fs-2xs: 0.75rem;     /* 12px */
  --fs-xs: 0.8125rem;    /* 13px */
  --fs-sm: 0.875rem;     /* 14px */
  --fs-base: 0.9375rem;  /* 15px */
  --fs-md: 1.0625rem;    /* 17px */
  --fs-lg: 1.25rem;
  --fs-xl: 1.5rem;
  --fs-2xl: clamp(1.6rem, 1.2rem + 1.6vw, 2.25rem);
  --fs-3xl: clamp(2rem, 1.3rem + 3vw, 3.25rem);
  --fs-4xl: clamp(2.4rem, 1.2rem + 5.2vw, 4.75rem);

  --lh-tight: 1.1;
  --lh-snug: 1.28;
  --lh-normal: 1.6;
  --lh-loose: 1.72;

  /* --------------------------------------------------------------- space */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --sp-10: 8rem;

  --shell: 78rem;
  --shell-narrow: 46rem;
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* -------------------------------------------------------------- motion */
  --dur-instant: 90ms;
  --dur-fast: 160ms;
  --dur-base: 260ms;
  --dur-slow: 460ms;
  --ease-out: cubic-bezier(0.16, 0.84, 0.44, 1);
  --ease-in: cubic-bezier(0.55, 0, 0.85, 0.4);
  --ease-inout: cubic-bezier(0.5, 0, 0.5, 1);
  --ease-spring: cubic-bezier(0.34, 1.42, 0.64, 1);

  color-scheme: dark light;
}

/* ============================================================ dark theme */
:root,
:root[data-theme='dark'] {
  --bg: #0b0e14;
  --bg-tint: #0e131b;
  --surface: #12161f;
  --surface-2: #171d28;
  --surface-3: #1e2634;
  --surface-inset: #0a0d13;
  --border: #232b3a;
  --border-2: #2e394d;
  --border-strong: #414f6b;

  --text: #edf1f8;
  --text-2: #9fabc2;
  --text-3: #77839b;

  --accent: #9aa9ff;          /* text / icon on dark surfaces */
  --accent-2: #c2cbff;
  --accent-solid: #5b5fef;    /* filled surfaces, white text */
  --accent-solid-hover: #6d70f5;
  --accent-quiet: #191d34;
  --accent-line: #3b3f8f;
  --on-accent: #ffffff;

  --teal: #52d9c3;
  --teal-quiet: #0d2a29;
  --amber: #f9c96b;
  --amber-quiet: #2b2314;
  --rose: #fb9db2;
  --rose-quiet: #2c1720;
  --violet: #cbaafd;
  --violet-quiet: #241a35;
  --green: #79ecac;
  --green-quiet: #10281d;
  --danger: #ff9c92;
  --danger-quiet: #2e1717;

  --focus: #ffd166;
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--focus);
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.5);
  --shadow: 0 8px 24px -8px rgb(0 0 0 / 0.7), 0 2px 6px -2px rgb(0 0 0 / 0.5);
  --shadow-lg: 0 32px 60px -20px rgb(0 0 0 / 0.8), 0 8px 20px -8px rgb(0 0 0 / 0.6);
  --scrim: rgb(3 5 9 / 0.72);

  --grid-line: rgb(255 255 255 / 0.045);
  --glow: 0.55;
}

/* =========================================================== light theme */
:root[data-theme='light'] {
  --bg: #fbfbfd;
  --bg-tint: #f5f6fa;
  --surface: #ffffff;
  --surface-2: #f4f6fb;
  --surface-3: #eaeef6;
  --surface-inset: #f7f8fc;
  --border: #e2e6f0;
  --border-2: #ccd3e2;
  --border-strong: #a8b2c8;

  --text: #10141d;
  --text-2: #4c5568;
  --text-3: #667087;

  --accent: #4a4fd0;
  --accent-2: #3b40b8;
  --accent-solid: #4f46e5;
  --accent-solid-hover: #423ad1;
  --accent-quiet: #eef0ff;
  --accent-line: #c3c7f7;
  --on-accent: #ffffff;

  --teal: #0e7568;
  --teal-quiet: #e0f5f1;
  --amber: #8a5a06;
  --amber-quiet: #fdf1dc;
  --rose: #ad2a56;
  --rose-quiet: #fdeaf0;
  --violet: #6a2fbd;
  --violet-quiet: #f2ebfd;
  --green: #12703a;
  --green-quiet: #e3f6e9;
  --danger: #b3261e;
  --danger-quiet: #fdeceb;

  --focus: #6b3b00;
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--focus);
  --shadow-sm: 0 1px 2px rgb(16 20 29 / 0.06);
  --shadow: 0 8px 24px -10px rgb(16 20 29 / 0.16), 0 2px 6px -2px rgb(16 20 29 / 0.08);
  --shadow-lg: 0 32px 60px -24px rgb(16 20 29 / 0.24), 0 8px 20px -10px rgb(16 20 29 / 0.12);
  --scrim: rgb(16 20 29 / 0.4);

  --grid-line: rgb(16 20 29 / 0.045);
  --glow: 0.16;
}

@media (prefers-color-scheme: light) {
  :root[data-theme='auto'] {
    --bg: #fbfbfd;
    --bg-tint: #f5f6fa;
    --surface: #ffffff;
    --surface-2: #f4f6fb;
    --surface-3: #eaeef6;
    --surface-inset: #f7f8fc;
    --border: #e2e6f0;
    --border-2: #ccd3e2;
    --border-strong: #a8b2c8;
    --text: #10141d;
    --text-2: #4c5568;
    --text-3: #667087;
    --accent: #4a4fd0;
    --accent-2: #3b40b8;
    --accent-solid: #4f46e5;
    --accent-solid-hover: #423ad1;
    --accent-quiet: #eef0ff;
    --accent-line: #c3c7f7;
    --on-accent: #ffffff;
    --teal: #0e7568;
    --teal-quiet: #e0f5f1;
    --amber: #8a5a06;
    --amber-quiet: #fdf1dc;
    --rose: #ad2a56;
    --rose-quiet: #fdeaf0;
    --violet: #6a2fbd;
    --violet-quiet: #f2ebfd;
    --green: #12703a;
    --green-quiet: #e3f6e9;
    --danger: #b3261e;
    --danger-quiet: #fdeceb;
    --focus: #6b3b00;
    --shadow-sm: 0 1px 2px rgb(16 20 29 / 0.06);
    --shadow: 0 8px 24px -10px rgb(16 20 29 / 0.16), 0 2px 6px -2px rgb(16 20 29 / 0.08);
    --shadow-lg: 0 32px 60px -24px rgb(16 20 29 / 0.24), 0 8px 20px -10px rgb(16 20 29 / 0.12);
    --scrim: rgb(16 20 29 / 0.4);
    --grid-line: rgb(16 20 29 / 0.045);
    --glow: 0.16;
  }
}

/* =========================== forced / increased contrast preferences ==== */
@media (prefers-contrast: more) {
  :root,
  :root[data-theme='dark'] {
    --text: #ffffff;
    --text-2: #d5dcea;
    --text-3: #b8c1d3;
    --border: #4a566e;
    --border-2: #66738d;
    --border-strong: #8e9ab2;
    --accent: #c3ccff;
    --glow: 0;
  }
  :root[data-theme='light'] {
    --text: #000000;
    --text-2: #2c3342;
    --text-3: #3c4356;
    --border: #9aa3b6;
    --border-2: #7a8398;
    --border-strong: #4c5568;
    --accent: #2b2fa8;
    --glow: 0;
  }
  * {
    --shadow: none;
    --shadow-lg: none;
  }
}

@media (forced-colors: active) {
  :root {
    --border: CanvasText;
    --border-2: CanvasText;
    --focus: Highlight;
  }
}