/* SyncDock design tokens. Canonical copy: web/brand/tokens.css. The console
   and node admin each ship a byte-identical copy (a test enforces it). */

:root {
  /* Brand */
  --sd-orange: #ff8700;
  --sd-ink: #111820;
  --sd-canvas: #f7f7f4;
  --sd-mist: #e4e8e8;
  --sd-surface-dark: #1b252e;
  --sd-orange-shade: #d96b00;

  /* UI support: one muted red and one muted green, each as a tint
     background plus an accent rule. Text on them stays ink or canvas. */
  --sd-red: #b3392b;
  --sd-red-tint: #f6dcd6;
  --sd-green: #2e7d4f;
  --sd-green-tint: #dcebdd;
  --sd-orange-tint: #ffe8c7;

  /* Semantic layer, light */
  --background: var(--sd-canvas);
  --surface: var(--sd-canvas);
  --inset: rgb(228 232 232 / 55%);
  --text: var(--sd-ink);
  --text-secondary: rgb(17 24 32 / 72%);
  --text-on-accent: var(--sd-ink);
  --border: var(--sd-mist);
  --border-strong: rgb(17 24 32 / 55%);
  --accent: var(--sd-orange);
  --accent-hover: var(--sd-orange-shade);
  --focus: var(--sd-orange-shade);
  --link-underline: var(--sd-orange-shade);

  --danger-bg: var(--sd-red-tint);
  --danger-rule: var(--sd-red);
  --success-bg: var(--sd-green-tint);
  --success-rule: var(--sd-green);
  --warning-bg: var(--sd-orange-tint);
  --warning-rule: var(--sd-orange-shade);
  --tombstone-bg: var(--sd-mist);
  --tombstone-rule: var(--border-strong);

  --shadow: 0 1px 2px rgb(17 24 32 / 12%);
  --backdrop: rgb(17 24 32 / 55%);
  --radius: 8px;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --background: var(--sd-ink);
    --surface: var(--sd-surface-dark);
    --inset: rgb(247 247 244 / 6%);
    --text: var(--sd-canvas);
    --text-secondary: rgb(247 247 244 / 72%);
    --border: rgb(247 247 244 / 10%);
    --border-strong: rgb(247 247 244 / 55%);
    --accent-hover: #ffa033;
    --focus: var(--sd-orange);
    --link-underline: var(--sd-orange);

    --danger-bg: #4a2428;
    --danger-rule: #e5736a;
    --success-bg: #1f3a2b;
    --success-rule: #4daf7a;
    --warning-bg: #4a3414;
    --warning-rule: var(--sd-orange);
    --tombstone-bg: rgb(247 247 244 / 8%);
    --tombstone-rule: var(--border-strong);

    --shadow: 0 1px 2px rgb(0 0 0 / 50%);
    --backdrop: rgb(0 0 0 / 60%);

    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --background: var(--sd-ink);
  --surface: var(--sd-surface-dark);
  --inset: rgb(247 247 244 / 6%);
  --text: var(--sd-canvas);
  --text-secondary: rgb(247 247 244 / 72%);
  --border: rgb(247 247 244 / 10%);
  --border-strong: rgb(247 247 244 / 55%);
  --accent-hover: #ffa033;
  --focus: var(--sd-orange);
  --link-underline: var(--sd-orange);

  --danger-bg: #4a2428;
  --danger-rule: #e5736a;
  --success-bg: #1f3a2b;
  --success-rule: #4daf7a;
  --warning-bg: #4a3414;
  --warning-rule: var(--sd-orange);
  --tombstone-bg: rgb(247 247 244 / 8%);
  --tombstone-rule: var(--border-strong);

  --shadow: 0 1px 2px rgb(0 0 0 / 50%);
  --backdrop: rgb(0 0 0 / 60%);

  color-scheme: dark;
}