/* Okim Logistics design tokens. The only place a raw color or font name may appear. */
:root{
  /* brand */
  --red:#C81E1E;
  --red-deep:#7A1414;
  --ink:#0A0A0A;
  --panel:#141414;
  --white:#FFFFFF;
  --muted:#9C9C9C;
  --live:#3ECF6E;

  /* type */
  --font-display:'Space Grotesk',system-ui,sans-serif;
  --font-body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;

  /* theme: light (default). Pages use these, never the brand values directly. */
  color-scheme:light;
  --bg:var(--white);
  --fg:var(--ink);
  --surface:color-mix(in srgb,var(--ink) 4%,var(--white));
  --fg-muted:color-mix(in srgb,var(--ink) 62%,var(--white));
  --text-soft:color-mix(in srgb,var(--ink) 80%,var(--white));
  --line:color-mix(in srgb,var(--ink) 12%,transparent);
  --line-strong:color-mix(in srgb,var(--ink) 28%,transparent);
  --shadow:color-mix(in srgb,var(--ink) 20%,transparent);
  --glow-a:color-mix(in srgb,var(--red) 9%,transparent);
  --glow-b:color-mix(in srgb,var(--red-deep) 9%,transparent);
  --needs-bg:color-mix(in srgb,var(--red) 9%,var(--white));

  /* on the deep-red panel */
  --on-red-deep:color-mix(in srgb,var(--white) 86%,var(--red-deep));

  /* layout */
  --shell:1240px;
  --gutter:clamp(20px,5vw,72px);
  --radius:10px;
}

/* theme: dark (ink background, red glow). Apply data-theme="dark" to any section, or to <html> for a fully dark site. */
[data-theme="dark"]{
  color-scheme:dark;
  --bg:var(--ink);
  --fg:var(--white);
  --surface:var(--panel);
  --fg-muted:var(--muted);
  --text-soft:color-mix(in srgb,var(--white) 84%,var(--ink));
  --line:color-mix(in srgb,var(--white) 10%,transparent);
  --line-strong:color-mix(in srgb,var(--white) 24%,transparent);
  --shadow:color-mix(in srgb,var(--ink) 80%,transparent);
  --glow-a:color-mix(in srgb,var(--red) 22%,transparent);
  --glow-b:color-mix(in srgb,var(--red-deep) 34%,transparent);
  --needs-bg:color-mix(in srgb,var(--red-deep) 45%,transparent);
}