/* rotascale.com — design tokens.
 *
 * subhadipmitra@: The palette is the CONSOLE's, not a second one invented for
 * marketing. Somebody who reads this site and then opens demo.rotascale.com
 * should not feel they have moved between two products.
 *
 * ## Why there is a serif here at all
 *
 * This product's entire argument is precision about words — `observed` is not
 * `asserted`, a `defect` is not a `residual`, `not applicable` is not `passed`.
 * A site set entirely in the default UI grotesque says none of that. Spectral
 * carries the statements; Libre Franklin, which descends from the Franklin
 * Gothic of public documents rather than from startup chrome, carries the
 * reading; and IBM Plex Mono is the product's own voice, used for identifiers,
 * states and gate names because that is how they appear in the record.
 *
 * ## Dark is not the light page inverted
 *
 * Three things move for reasons. The accent lightens, because #b509ac on a dark
 * ground is a smudge. The semantic colours lighten with it, because a
 * compliance reader has to tell allow from deny at a glance. And `--rule-hard`
 * inverts to near-white: on paper it is the strongest line on the page, and it
 * has to stay that.
 *
 * The dark ground is a faintly blue near-black rather than #000, which flattens
 * the semantics and turns a document into a terminal.
 */

:root {
  color-scheme: light dark;

  --paper: #fcfcfb;
  --paper-2: #f4f4f2;
  --rule: #e0e0dc;
  --rule-hard: #14181b;
  --ink: #14181b;
  --ink-2: #39424b;
  --muted: #6d7680;
  --on-ink: #fcfcfb;

  --accent: #b509ac;
  --accent-soft: #fdf0fc;
  --select: #f3c4ee;

  /* The product's six outcomes reduce to three colours a reader must never
     confuse. Same three the console uses. */
  --allow: #1a6b3c;
  --deny: #b3261e;
  --review: #8a5a00;

  --serif: 'Spectral', Georgia, 'Times New Roman', serif;
  --sans: 'Libre Franklin', system-ui, -apple-system, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --wrap: 1140px;
  --gutter: 32px;

  /* No radius scale and no shadow scale, deliberately. This design separates
     things with rules and alignment; a card with a soft shadow is the visual
     idiom of every other page in the category. */
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #101317;
    --paper-2: #171b20;
    --rule: #282e35;
    --rule-hard: #e8eaec;
    --ink: #eef0f2;
    --ink-2: #b4bcc4;
    --muted: #828c96;
    --on-ink: #101317;

    --accent: #ef8ce9;
    --accent-soft: #21161f;
    --select: #6b2f64;

    --allow: #4cc98a;
    --deny: #ff7b72;
    --review: #e0a33a;
  }
}

/* The explicit toggle wins over the OS, in both directions. */
:root[data-theme="dark"] {
  --paper: #101317;
  --paper-2: #171b20;
  --rule: #282e35;
  --rule-hard: #e8eaec;
  --ink: #eef0f2;
  --ink-2: #b4bcc4;
  --muted: #828c96;
  --on-ink: #101317;

  --accent: #ef8ce9;
  --accent-soft: #21161f;
  --select: #6b2f64;

  --allow: #4cc98a;
  --deny: #ff7b72;
  --review: #e0a33a;
}

:root[data-theme="light"] {
  --paper: #fcfcfb;
  --paper-2: #f4f4f2;
  --rule: #e0e0dc;
  --rule-hard: #14181b;
  --ink: #14181b;
  --ink-2: #39424b;
  --muted: #6d7680;
  --on-ink: #fcfcfb;

  --accent: #b509ac;
  --accent-soft: #fdf0fc;
  --select: #f3c4ee;

  --allow: #1a6b3c;
  --deny: #b3261e;
  --review: #8a5a00;
}