/*
 * K5 — "Como LinkedIn", the skin chosen 2026-08-09 (design artifact
 * "link-OPS Air — Look & feel"). LinkedIn's wardrobe on the family's bones:
 * greige canvas and white cards in light, the app's carbon grey in dark,
 * #0A66C2 as the only action colour, verbs as pills. Semantics are fixed
 * across every skin: green is published, amber is queued/warning, red is
 * failed. A theme changes colour, never size — the type scale is declared
 * once and deliberately not repeated under [data-theme].
 */

:root {
  --bg: #f4f2ee;
  --card: #ffffff;
  --inset: #ece9e4;
  --hover: #f7f5f2;
  --line: #e0dfdc;
  --line-hard: #c9c7c2;
  --hair: #d5d3cf;

  --tx: #1a1a1a;
  --tx2: #5a5a5a;
  --tx3: #828282;
  --tx4: #a3a3a3;

  --ac: #0a66c2;
  --ac-lite: #378fe9;
  --ac-bg: #e7f0f9;
  --on-ac: #ffffff;

  --ok: #057642;
  --ok-bg: #e4f0e9;
  --warn: #8c5a00;
  --warn-bg: #f5ecd9;
  --bad: #cc1016;
  --bad-bg: #f8e4e5;

  --lift-bg: #eae7e2;
  --lift-card: #ffffff;
  --lift-line: #d5d3cf;

  --radius: 10px;
  --gutter: 18px;

  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);

  --ios: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  /* One scale; the Mac raises --scale and every rank moves together. */
  --scale: 1;
  --t-title: calc(28px * var(--scale));
  --t-body: calc(17px * var(--scale));
  --t-row: calc(15px * var(--scale));
  --t-label: calc(12px * var(--scale));
  --t-meta: calc(12px * var(--scale));
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0b0e11;
    --card: #1b1f23;
    --inset: #14181c;
    --hover: #24292e;
    --line: #2f3439;
    --line-hard: #4a5157;
    --hair: #3a4045;

    --tx: #f2f2f2;
    --tx2: #c0c4c8;
    --tx3: #8e959b;
    --tx4: #6b7278;

    --ac: #70b5f9;
    --ac-lite: #9fcdfb;
    --ac-bg: #1c2e42;
    --on-ac: #06213b;

    --ok: #7fc15e;
    --ok-bg: #1f2c1a;
    --warn: #e7a33e;
    --warn-bg: #332a17;
    --bad: #ff6c5c;
    --bad-bg: #38201d;

    --lift-bg: #14181c;
    --lift-card: #23282d;
    --lift-line: #3a4045;
  }
}

[data-theme="dark"] {
  --bg: #0b0e11;
  --card: #1b1f23;
  --inset: #14181c;
  --hover: #24292e;
  --line: #2f3439;
  --line-hard: #4a5157;
  --hair: #3a4045;

  --tx: #f2f2f2;
  --tx2: #c0c4c8;
  --tx3: #8e959b;
  --tx4: #6b7278;

  --ac: #70b5f9;
  --ac-lite: #9fcdfb;
  --ac-bg: #1c2e42;
  --on-ac: #06213b;

  --ok: #7fc15e;
  --ok-bg: #1f2c1a;
  --warn: #e7a33e;
  --warn-bg: #332a17;
  --bad: #ff6c5c;
  --bad-bg: #38201d;

  --lift-bg: #14181c;
  --lift-card: #23282d;
  --lift-line: #3a4045;
}