/* Matching design contract in sepoysite and sepoyblog. Run alignment:check after changes. */
:root {
  --color-1: #F5F8FC;
  --color-2: #374151;
  --color-3: #0067E6;
  --color-4: #0047A8;
  --color-5: #000000;
  --bg: var(--color-1);
  --muted: var(--color-2);
  --accent: var(--color-3);
  --accent-secondary: var(--color-4);
  --accent-2: var(--accent-secondary);
  --fg: var(--color-5);
  --surface: color-mix(in srgb, var(--accent) 7%, var(--bg));
  --border: color-mix(in srgb, var(--accent) 24%, var(--bg));
  --code-bg: var(--bg);
  --font-family-base: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
  --font-family-mono: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace;
  --space-xs: .25rem;
  --space-sm: .5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --text-xs: .75rem;
  --text-sm: .875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --text-5xl: 3rem;
  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.75;
  --border-width: 1px;
  --border-radius: .375rem;
  --border-radius-lg: .5rem;
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / .05);
  --shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px 0 rgb(0 0 0 / .06);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -2px rgb(0 0 0 / .05);
  --transition-fast: 150ms ease-in-out;
  --transition-normal: 300ms ease-in-out;
  --max-width: 56rem;
  --reading-width: 65ch;
  --max-width-wide: 72rem;
  --header-height: 4rem;
}