/*
 * Saga neutral graphite theme.
 *
 * Loaded last on every active HTML page. Product and marketing surfaces use
 * achromatic grays; the Saga logo artwork remains the single brand-color
 * exception. Color is otherwise reserved for restrained semantic status.
 */

:root {
  color-scheme: dark;

  --bg: #0B0B0C;
  --bg2: #101011;
  --bg-2: #101011;
  --bg-soft: #101011;
  --bg-raised: #101011;
  --bg-deep: #0B0B0C;
  --night: #0B0B0C;

  --surface: #171718;
  --surface2: #1E1E20;
  --surface-2: #1E1E20;
  --surface-3: #262628;
  --surface-solid: #171718;
  --surface-raised: #262628;
  --panel: #171718;
  --panel-2: #1E1E20;
  --panel-hi: #262628;
  --tile: #1E1E20;

  --border: #3A3A3E;
  --border-subtle: #29292C;
  --line: #29292C;
  --line2: #3A3A3E;
  --line-2: #3A3A3E;
  --line-hi: #3A3A3E;
  --line-soft: #29292C;
  --line-strong: #3A3A3E;

  --text: #F3F3F2;
  --txt: #F3F3F2;
  --ink: #F3F3F2;
  --white: #F3F3F2;
  --muted: #A7A7AA;
  --text-muted: #A7A7AA;
  --dim: #858589;
  --faint: #858589;
  --text-dim: #858589;

  --accent: #D0D0D2;
  --accent-hi: #E2E2E4;
  --accent-dim: #58585E;
  --accent-ink: #111112;
  --accent-soft: rgba(208, 208, 210, .11);
  --focus: #B8B8BC;

  --mint: #D0D0D2;
  --mint-ink: #111112;
  --mint-dark: #1E1E20;
  --mint-soft: rgba(208, 208, 210, .11);
  --teal: #D0D0D2;
  --teal-hi: #E2E2E4;
  --teal-ink: #111112;
  --teal-wash: rgba(208, 208, 210, .10);
  --cyan: #D0D0D2;
  --cyan-hi: #E2E2E4;
  --blue: #B8B8BC;
  --violet: #A7A7AA;
  --coral: #B8B8BC;
  --warm: #B8B8BC;
  --warm-hi: #D0D0D2;
  --warm-dim: #58585E;
  --sand: #A7A7AA;
  --gold: #A7A7AA;
  --lime: #D0D0D2;
  --lime-ink: #111112;
  --lime-dim: rgba(208, 208, 210, .11);
  --grad: linear-gradient(115deg, #D0D0D2 0%, #B8B8BC 50%, #A7A7AA 100%);

  --image: #D0D0D2;
  --video: #A7A7AA;
  --audio: #858589;
  --canvas-blue: #A7A7AA;
  --canvas-cyan: #D0D0D2;
  --canvas-pink: #858589;
  --canvas-violet: #B8B8BC;
  --m-nbp: #D0D0D2;
  --m-gpt: #B8B8BC;
  --m-flux: #A7A7AA;
  --m-mj: #858589;
  --nbp: #D0D0D2;

  --ok: #8EA394;
  --good: #8EA394;
  --success: #8EA394;
  --err: #B77D7D;
  --bad: #B77D7D;
  --danger: #B77D7D;
  --red: #B77D7D;
  --rose: #B77D7D;
  --warn: #A08C72;
  --warning: #A08C72;
  --amber: #A08C72;
  --amber-soft: rgba(160, 140, 114, .11);

  --s-video: #A7A7AA;
  --s-image: #D0D0D2;
  --s-audio: #858589;
  --s-queue: #A08C72;
  --s-cap: #B77D7D;
  --s-env: #A7A7AA;
  --s-surface: #171718;
  --s-grid: #29292C;
  --s-muted: #A7A7AA;
}

body.saga-light {
  color-scheme: light;

  --bg: #F3F3F1;
  --bg2: #FAFAF8;
  --bg-2: #FAFAF8;
  --bg-soft: #E9E9E6;
  --bg-raised: #FAFAF8;
  --surface: #FAFAF8;
  --surface2: #E9E9E6;
  --surface-2: #E9E9E6;
  --surface-3: #D0D0CD;
  --panel: #FAFAF8;
  --panel-2: #E9E9E6;
  --paper: #F3F3F1;
  --paper-2: #E9E9E6;
  --white: #FAFAF8;
  --night: #171718;
  --ink: #171718;
  --text: #171718;
  --txt: #171718;
  --muted: #66666A;
  --text-muted: #66666A;
  --dim: #66666A;
  --faint: #66666A;
  --text-dim: #66666A;
  --line: #D0D0CD;
  --line2: #B8B8B5;
  --line-2: #B8B8B5;
  --border: #D0D0CD;
  --border-subtle: #E0E0DD;

  --accent: #3F3F43;
  --accent-hi: #242426;
  --accent-dim: #858589;
  --accent-ink: #FAFAF8;
  --accent-soft: rgba(63, 63, 67, .09);
  --focus: #3F3F43;
  --mint: #3F3F43;
  --mint-ink: #FAFAF8;
  --mint-dark: #E9E9E6;
  --mint-soft: rgba(63, 63, 67, .09);
  --violet: #66666A;
  --coral: #66666A;
  --warm: #66666A;
  --blue: #66666A;

  --ok: #506A58;
  --good: #506A58;
  --success: #506A58;
  --err: #8A5252;
  --bad: #8A5252;
  --danger: #8A5252;
  --warn: #705E48;
  --warning: #705E48;
}

/* The mobile acquisition banner belongs to the neutral system too. */
.founding-banner {
  border-color: #A7A7AA;
  background: #D6D6D3;
  color: #171718;
}

.founding-banner-label {
  background: #111112;
  color: #D6D6D3;
}

.founding-banner-spots {
  color: #58585E;
}

/* Direct status labels that do not use a semantic custom property. */
:is(
  .form-error,
  .quote-state.error,
  .error-mark,
  .collab-error .gate-mark,
  .agent-step.failed,
  .badge.failed,
  .delivery-status.exhausted,
  .shootout-qc-badge.fail,
  .shootout-qc-badge.unknown
) {
  color: var(--err);
}

:is(
  .badge.done,
  .status-badge.approved,
  .asset-review-status.approved,
  .review-link-status.active,
  .review-activity-mark.approved
) {
  color: var(--ok);
}

:is(
  .badge.rendering,
  .badge.queued,
  .badge.working,
  .status-badge.changes,
  .asset-review-status.changes,
  .shootout-qc-badge.review
) {
  color: var(--warn);
}

#sagaContentPolicyError {
  color: var(--err) !important;
}