/* Kamil Prokurat Design System: tokens. The written rules are in DESIGN.md; this file is the same values as CSS variables.
   Use it in apps, web graphics and Hyperframes motion graphics. Dark is the default. Light follows the system setting,
   or force one with <html data-theme="dark"> or <html data-theme="light">.
   Fonts load from fonts/ next to this file. If you copy this file somewhere, copy fonts/ with it. */

@font-face { font-family: "Metropolis"; src: url("fonts/Metropolis-Regular.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Metropolis"; src: url("fonts/Metropolis-Medium.otf") format("opentype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Metropolis"; src: url("fonts/Metropolis-SemiBold.otf") format("opentype"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Metropolis"; src: url("fonts/Metropolis-Bold.otf") format("opentype"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Metropolis"; src: url("fonts/Metropolis-Black.otf") format("opentype"); font-weight: 900; font-style: normal; font-display: swap; }

:root {
  color-scheme: dark;

  /* surfaces: canvas, then card, then raised. Depth is the ladder, never a shadow */
  --canvas: #040506;
  --card: #0a0b0d;
  --raised: #111214;
  --border: #1f2125;
  --border-strong: #383b3f;

  /* text */
  --text: #ffffff;
  --text-body: #d0d6e0;
  --text-muted: #8a8f98;
  --text-faint: #62666d; /* marks only, never words */

  /* the one accent, rationed: see "How red is used" in DESIGN.md */
  --red: #c0392b;
  --red-soft: #e9a79f;
  --red-tint: rgba(192, 57, 43, 0.09);
  --red-ring: rgba(192, 57, 43, 0.7);

  /* status: small dim dots with a shape, never a filled chip */
  --ok: #5fa37a;
  --warn: #cf9f4a;
  --quiet: #b0716c;

  /* data hues: charts only, 4 muted slots plus gray. Kamil to confirm. */
  --data-1: #6f93c6;
  --data-2: #a28bd4;
  --data-3: #4fb0b4;
  --data-4: #c78bb6;
  --data-other: #8a8f98;

  /* buttons: the one filled button is the light Mist fill (ink fill in light mode) */
  --btn-fill: #e6e6e6;
  --btn-fill-hover: #ffffff;
  --btn-text: #454647;
  --btn-lift: 0 7px 3px rgba(0, 0, 0, 0.03), 0 4px 4px rgba(0, 0, 0, 0.25);

  /* washes and edges */
  --wash: rgba(255, 255, 255, 0.05);
  --wash-2: rgba(255, 255, 255, 0.03);
  --wash-rest: rgba(255, 255, 255, 0.06);
  --card-edge: inset 0 0 0 1px var(--border), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --scrim: rgba(0, 0, 0, 0.7);
  --float: 0 0 0 1px var(--border-strong), inset 0 1px 0 rgba(255, 255, 255, 0.06); /* tooltips and dialogs */
  --atmosphere: radial-gradient(ellipse 55% 100% at 78% 0, rgba(192, 57, 43, 0.09), transparent 70%), radial-gradient(ellipse 45% 90% at 22% 0, rgba(70, 100, 170, 0.07), transparent 70%);

  /* type */
  --font: "Metropolis", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-h1: 32px;
  --fs-kpi: 48px;
  --fs-title: 13px;
  --fs-label: 11px;
  --fs-body: 14px;
  --fs-small: 13px;
  --fs-caption: 12px;

  /* radii */
  --r-xs: 3px;
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 8px;
  --r-xl: 12px;
  --r-pill: 9999px;

  /* motion */
  --t-fast: 100ms;
  --t: 150ms;
  --hair: 0.5px;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --canvas: #f4f5f7;
    --card: #ffffff;
    --raised: #eef0f3;
    --border: #e3e5e9;
    --border-strong: #c9ccd2;
    --text: #0b0c0e;
    --text-body: #2c3038;
    --text-muted: #5e6470;
    --text-faint: #a3a8b1;
    --red: #c0392b;
    --red-soft: #a52f23;
    --red-tint: rgba(192, 57, 43, 0.07);
    --red-ring: rgba(192, 57, 43, 0.6);
    --ok: #2f7d52;
    --warn: #946512;
    --quiet: #9a5650;
    --data-1: #3f6aa5;
    --data-2: #7557b5;
    --data-3: #2a8388;
    --data-4: #a2547f;
    --data-other: #5e6470;
    --btn-fill: #1c1d20;
    --btn-fill-hover: #34363b;
    --btn-text: #ffffff;
    --btn-lift: 0 1px 2px rgba(11, 12, 14, 0.18);
    --wash: rgba(11, 12, 14, 0.05);
    --wash-2: rgba(11, 12, 14, 0.035);
    --wash-rest: rgba(11, 12, 14, 0.06);
    --card-edge: inset 0 0 0 1px var(--border), 0 1px 2px rgba(11, 12, 14, 0.04);
    --scrim: rgba(11, 12, 14, 0.45);
    --float: 0 0 0 1px var(--border-strong), 0 12px 32px rgba(11, 12, 14, 0.14);
    --atmosphere: none;
  }
}

:root[data-theme="light"] {
  color-scheme: light;
  --canvas: #f4f5f7;
  --card: #ffffff;
  --raised: #eef0f3;
  --border: #e3e5e9;
  --border-strong: #c9ccd2;
  --text: #0b0c0e;
  --text-body: #2c3038;
  --text-muted: #5e6470;
  --text-faint: #a3a8b1;
  --red: #c0392b;
  --red-soft: #a52f23;
  --red-tint: rgba(192, 57, 43, 0.07);
  --red-ring: rgba(192, 57, 43, 0.6);
  --ok: #2f7d52;
  --warn: #946512;
  --quiet: #9a5650;
  --data-1: #3f6aa5;
  --data-2: #7557b5;
  --data-3: #2a8388;
  --data-4: #a2547f;
  --data-other: #5e6470;
  --btn-fill: #1c1d20;
  --btn-fill-hover: #34363b;
  --btn-text: #ffffff;
  --btn-lift: 0 1px 2px rgba(11, 12, 14, 0.18);
  --wash: rgba(11, 12, 14, 0.05);
  --wash-2: rgba(11, 12, 14, 0.035);
  --wash-rest: rgba(11, 12, 14, 0.06);
  --card-edge: inset 0 0 0 1px var(--border), 0 1px 2px rgba(11, 12, 14, 0.04);
  --scrim: rgba(11, 12, 14, 0.45);
  --float: 0 0 0 1px var(--border-strong), 0 12px 32px rgba(11, 12, 14, 0.14);
  --atmosphere: none;
}