/* The Midnight Commit brand tokens, taken from themidnightcommit.com.
   Demo products override the surface, accent, type and shape tokens in css/skins.css. */
:root {
  color-scheme: dark;
  --void: #04050a;
  --ink: #0a0d16;
  --paper: #eceae4;
  --moon: #9aa6bf;
  --dim: #7a84a0;
  --cobalt: #4c6fff;
  --cobalt-soft: #8fa6ff;
  --amber: #ffb23f;

  --bg: var(--void);
  --bg-2: var(--ink);
  --card: #0e121d;
  --card-2: #161b29;
  --text: var(--paper);
  --muted: var(--moon);
  --border: rgba(201, 211, 230, 0.14);
  --border-strong: rgba(201, 211, 230, 0.3);
  --accent: var(--amber);
  --accent-2: var(--cobalt-soft);
  --on-accent: #120c02;
  --accent-ink: var(--amber);
  --accent-soft: rgba(255, 178, 63, 0.14);
  --btn-bg: var(--accent);
  --btn-fg: var(--on-accent);

  --good: #4fd6a0;
  --warn: #ffb23f;
  --bad: #ff8a7a;
  --info: #8fa6ff;

  --display: 'Archivo', 'Arial Narrow', system-ui, sans-serif;
  --font: 'Geist', 'Segoe UI', system-ui, sans-serif;
  --mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;

  --t-xs: 0.75rem;
  --t-sm: 0.875rem;
  --t-md: 1rem;
  --t-lg: 1.125rem;
  --t-xl: 1.5rem;
  --t-2xl: clamp(2rem, 4.2vw, 3.75rem);
  --t-hero: clamp(2.2rem, 4.35vw, 5.2rem);

  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;
  --s8: 88px;
  --s9: 144px;
  --pad: clamp(20px, 4vw, 64px);

  --r-sm: 2px;
  --r-md: 2px;
  --r-lg: 3px;

  --shadow: none;
  --shadow-lg: 0 50px 100px -40px rgba(0, 0, 0, 0.95);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --header-h: 76px;
}

/* The portfolio's own primary button is paper, as on the main site. Products use their accent. */
body[data-page] { --btn-bg: var(--paper); --btn-fg: var(--void); }

[data-theme='light'] {
  color-scheme: light;
  --bg: #f4f6f9;
  --bg-2: #ffffff;
  --card: #ffffff;
  --card-2: #eef1f6;
  --text: #0f172a;
  --muted: #55627a;
  --border: rgba(15, 23, 42, 0.1);
  --border-strong: rgba(15, 23, 42, 0.22);
  --accent-ink: color-mix(in oklab, var(--accent) 66%, black);
  --accent-soft: color-mix(in oklab, var(--accent) 12%, transparent);
  --good: #0f8a5f;
  --warn: #9a5b00;
  --bad: #c9303f;
  --info: #1d6fb8;
  --shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
  --shadow-lg: 0 30px 70px -30px rgba(15, 23, 42, 0.4);
}