/* LOCKED – color system */

:root {
  --bg-primary: #06070a;
  --bg-secondary: #0b0f16;
  --surface: #0d1016;
  --text-primary: #ffffff;
  --text-secondary: color-mix(in srgb, var(--text-primary) 84%, transparent);
  --text-muted: color-mix(in srgb, var(--text-primary) 62%, transparent);
  --border-subtle: color-mix(in srgb, var(--text-primary) 8%, transparent);
  --accent: #cfe7ff;

  --c-bg: var(--bg-primary);
  --c-surface: var(--surface);
  --c-surface-2: var(--bg-secondary);
  --c-text: var(--text-secondary);
  --c-muted: var(--text-muted);
  --c-border: var(--border-subtle);
  --c-border-strong: color-mix(in srgb, var(--text-primary) 14%, transparent);
  --c-shadow: color-mix(in srgb, #000 55%, transparent);
  --c-focus: var(--accent);

  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;
  --space-7: 56px;
  --space-8: 64px;

  --radius-sm: 10px;
  --radius-md: 12px;
  --radius-lg: 14px;

  --tap-target: 44px;

  --shadow-lg: 0 18px 42px var(--c-shadow);
  --shadow-md: 0 12px 28px rgba(0, 0, 0, 0.48);
  --shadow-sm: 0 8px 18px rgba(0, 0, 0, 0.42);

  --fs-0: 12px;
  --fs-1: 14px;
  --fs-2: 16px;
  --fs-3: 18px;
  --fs-4: 22px;
  --fs-5: 28px;
  --fs-6: clamp(34px, 4vw, 44px);

  --lh-tight: 1.2;
  --lh-body: 1.6;
  --lh-long: 1.72;

  --typeTracking: 0.08em;

  --dur-1: 140ms;
  --dur-2: 220ms;
  --dur-3: 260ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);

  --font-primary: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Apple Color Emoji",
    "Segoe UI Emoji";
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  --gutter: clamp(18px, 4vw, 56px);
  --page-max: clamp(980px, 92vw, 1400px);
  --content-max: 900px;

  --scroll-y: 0px;
  --scroll-v: 0;

  --robot-opacity: 1;

  --scrollContrast: 1;

  --parallaxGain: 0.12;
  --dampingMul: 1;
  --depthOpacity: 0.4;
  --depthTint: rgba(0, 0, 0, 0);
  --boundaryPressure: 0;

  --focusWash: 0;

  --robot-shell: #f2f4f7;
  --robot-ui-primary: #0b0f14;
  --robot-ui-secondary: color-mix(in srgb, var(--robot-ui-primary) 62%, transparent);

  --robot-shell-0: color-mix(in srgb, var(--surface) 18%, #fff);
  --robot-shell-1: color-mix(in srgb, var(--surface) 22%, #fff);
  --robot-stroke: color-mix(in srgb, var(--text-primary) 14%, var(--bg-primary));
  --robot-stroke-mid: color-mix(in srgb, var(--text-primary) 18%, var(--bg-primary));
  --robot-stroke-soft: color-mix(in srgb, var(--text-primary) 22%, transparent);
  --robot-ink: var(--bg-primary);
  --robot-socket: color-mix(in srgb, var(--bg-primary) 18%, transparent);

  --robot-eye-sclera: #ffffff;
  --robot-eye-iris-inner: color-mix(in srgb, var(--accent) 38%, #2b4f78);
  --robot-eye-iris-mid: color-mix(in srgb, var(--accent) 28%, #204260);
  --robot-eye-iris-outer: color-mix(in srgb, var(--accent) 18%, #172f44);
  --robot-eye-iris-ring: color-mix(in srgb, var(--accent) 42%, transparent);
  --robot-eye-pupil: var(--bg-primary);
  --robot-eye-highlight: color-mix(in srgb, #fff 86%, transparent);

  --robot-face-stroke: color-mix(in srgb, var(--text-primary) 22%, transparent);
  --robot-mouth-stroke: color-mix(in srgb, var(--text-primary) 16%, transparent);
}

html[data-theme="light"] {
  --bg-primary: #fbfcfe;
  --bg-secondary: #f1f4f9;
  --surface: #ffffff;
  --text-primary: #0b0f14;
  --text-secondary: color-mix(in srgb, var(--text-primary) 84%, transparent);
  --text-muted: color-mix(in srgb, var(--text-primary) 62%, transparent);
  --border-subtle: color-mix(in srgb, var(--text-primary) 10%, transparent);
  --accent: #1f5fa6;

  --c-shadow: color-mix(in srgb, #000 14%, transparent);

  --robot-shell: #1b1b1b;
  --robot-ui-primary: #f5f5f5;
  --robot-ui-secondary: color-mix(in srgb, var(--robot-ui-primary) 62%, transparent);

  --robot-shell-0: color-mix(in srgb, var(--surface) 94%, #d7e5f6);
  --robot-shell-1: color-mix(in srgb, var(--surface) 90%, #cfe0f2);
  --robot-stroke: color-mix(in srgb, var(--text-primary) 55%, transparent);
  --robot-stroke-mid: color-mix(in srgb, var(--text-primary) 62%, transparent);
  --robot-stroke-soft: color-mix(in srgb, var(--text-primary) 28%, transparent);
  --robot-ink: var(--text-primary);
  --robot-socket: color-mix(in srgb, var(--text-primary) 14%, transparent);

  --robot-eye-sclera: #ffffff;
  --robot-eye-iris-inner: color-mix(in srgb, var(--accent) 55%, #3f6f9a);
  --robot-eye-iris-mid: color-mix(in srgb, var(--accent) 45%, #315e86);
  --robot-eye-iris-outer: color-mix(in srgb, var(--accent) 35%, #223e5b);
  --robot-eye-iris-ring: color-mix(in srgb, var(--accent) 55%, transparent);
  --robot-eye-pupil: var(--text-primary);
  --robot-eye-highlight: color-mix(in srgb, #fff 86%, transparent);
}

@media (min-width: 1440px) {
  :root {
    --page-max: clamp(1100px, 92vw, 1520px);
    --content-max: min(74ch, 980px);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0ms !important;
    animation-duration: 0ms !important;
    animation-iteration-count: 1 !important;
  }
}

:root:has(.project[data-open]) {
  --focusWash: 1;
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

html[data-theme="dark"] {
  color-scheme: dark;
}

html[data-theme="light"] {
  color-scheme: light;
}

body {
  margin: 0;
  background:
    linear-gradient(
      to bottom,
      color-mix(in srgb, var(--bg-primary) calc(8% * var(--focusWash)), transparent) 0%,
      color-mix(in srgb, var(--bg-primary) calc(12% * var(--focusWash)), transparent) 100%
    ),
    radial-gradient(1100px 760px at 50% -18%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 62%),
    radial-gradient(1400px 900px at 50% 12%, color-mix(in srgb, var(--text-primary) 3%, transparent), transparent 64%),
    radial-gradient(1200px 900px at 50% 120%, color-mix(in srgb, var(--bg-primary) 42%, transparent), transparent 60%),
    linear-gradient(
      to bottom,
      color-mix(in srgb, var(--text-primary) 1.8%, transparent) 0%,
      transparent 22%,
      color-mix(in srgb, var(--bg-primary) 16%, transparent) 100%
    ),
    var(--bg-primary);
  color: var(--text-secondary);
  font-family: var(--font-primary);
  line-height: var(--lh-body);
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3 {
  margin: 0;
}

p {
  margin: 0;
}

p + p {
  margin-top: var(--space-2);
}

ul,
ol {
  margin: var(--space-2) 0;
  padding-left: var(--space-3);
}

li + li {
  margin-top: var(--space-1);
}

button {
  font: inherit;
  color: inherit;
}

button:not([disabled]) {
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

.skip-link {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: 9999;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text-primary);
  border: 1px solid var(--border-subtle);
  text-decoration: none;
  transform: translateY(-140%);
  transition: transform var(--dur-1) var(--ease-standard);
}

.skip-link:focus-visible {
  transform: translateY(0);
}

::selection {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
}

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

@media print {
  html {
    --bg-primary: #ffffff;
    --bg-secondary: #ffffff;
    --surface: #ffffff;
    --text-primary: #000000;
    --text-secondary: rgba(0, 0, 0, 0.84);
    --text-muted: rgba(0, 0, 0, 0.62);
    --border-subtle: rgba(0, 0, 0, 0.12);
    --accent: #000000;
  }
}