/*
  src/web/assets/identity-tokens.css

  The tokens of the account and administration pages: the factory console's identity tokens, the
  `--id-*` custom properties, as design/console/identity-tokens.css holds them, selectors and
  values unchanged, light, both dark blocks and the reduced-motion block. They are read under
  `[data-application="identity"]`, which the body of every page of the frame carries. Only this
  header is the service's: past it the file equals the record, so a diff against it is empty.

  Taken from design/console/, the copy of walreyes/tucum-factory-console, branch the-clean-slate,
  commit 7f379ceba523214a94772efdff710816b98ebd70
  (console/frontend/src/styles/identity-tokens.css).
*/

[data-application="identity"] {
  --id-font: var(--font-sans);
  --id-font-mono: var(--font-mono);

  /* five sizes, each with its leading */
  --id-text-meta: 0.75rem;
  --id-leading-meta: 1rem;
  --id-text: 0.8125rem;
  --id-leading: 1.25rem;
  --id-text-title: 0.9375rem;
  --id-leading-title: 1.375rem;
  --id-text-head: 1.125rem;
  --id-leading-head: 1.5rem;
  --id-text-display: 2.75rem;
  --id-leading-display: 2.75rem;
  --id-tracking-display: -0.035em;
  --id-tracking-title: -0.008em;
  --id-weight: 400;
  --id-weight-strong: 500;

  /* one spacing scale */
  --id-1: 0.25rem;
  --id-2: 0.5rem;
  --id-3: 0.75rem;
  --id-4: 1rem;
  --id-5: 1.25rem;
  --id-6: 1.5rem;
  --id-7: 2rem;
  --id-8: 3rem;
  --id-9: 4rem;
  --id-pad: 2rem;
  --id-page-width: 96rem;
  --id-bar-height: 3.25rem;
  --id-control: 1.75rem;
  --id-hairline: 1px;
  --id-stroke: 1.5px;
  --id-mark: 0.4375rem;
  --id-radius: 10px;
  --id-radius-control: 6px;

  /* a line of a list: who, the actions; the bar's field; a person's initials */
  --id-who: 13rem;
  --id-acts: 11rem;
  --id-field: 15rem;
  --id-avatar: 2rem;
  --id-avatar-large: 3rem;

  /* motion: a quick answer to the pointer, one move for what arrives */
  --id-quick: 120ms;
  --id-move: 360ms;
  --id-step: 45ms;
  --id-ease: cubic-bezier(0.2, 0, 0, 1);
  --id-rise: 0.5rem;

  --id-ground: oklch(0.948 0.004 85);
  --id-bar: oklch(0.985 0.003 85);
  --id-surface: oklch(0.995 0.002 85);
  --id-surface-hover: oklch(1 0 0);
  --id-fill: oklch(0.21 0.006 85 / 6%);
  --id-rule: oklch(0.21 0.006 85 / 10%);
  --id-rule-strong: oklch(0.21 0.006 85 / 24%);
  --id-ink: oklch(0.21 0.006 85);
  --id-ink-2: oklch(0.4 0.006 85);
  --id-ink-3: oklch(0.51 0.006 85);
  --id-on-ink: oklch(0.985 0.003 85);
  --id-active: oklch(0.55 0.15 150);
  --id-ending: oklch(0.6 0.13 68);
  --id-refused: oklch(0.54 0.2 25);
  --id-edge: oklch(0.21 0.006 85 / 9%);
  --id-shade: oklch(0.21 0.006 85 / 8%);
  --id-shadow: 0 0 0 var(--id-hairline) var(--id-edge), 0 1px 2px var(--id-shade);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) [data-application="identity"] {
    --id-ground: oklch(0.16 0.003 85);
    --id-bar: oklch(0.2 0.003 85);
    --id-surface: oklch(0.205 0.003 85);
    --id-surface-hover: oklch(0.235 0.003 85);
    --id-fill: oklch(0.93 0.004 85 / 7%);
    --id-rule: oklch(0.93 0.004 85 / 9%);
    --id-rule-strong: oklch(0.93 0.004 85 / 22%);
    --id-ink: oklch(0.93 0.004 85);
    --id-ink-2: oklch(0.76 0.004 85);
    --id-ink-3: oklch(0.62 0.004 85);
    --id-on-ink: oklch(0.17 0.003 85);
    --id-active: oklch(0.8 0.15 152);
    --id-ending: oklch(0.81 0.12 78);
    --id-refused: oklch(0.71 0.17 22);
    --id-edge: oklch(0.93 0.004 85 / 6%);
    --id-shade: oklch(0 0 0 / 0%);
  }
}

:root[data-theme="dark"] [data-application="identity"] {
  --id-ground: oklch(0.16 0.003 85);
  --id-bar: oklch(0.2 0.003 85);
  --id-surface: oklch(0.205 0.003 85);
  --id-surface-hover: oklch(0.235 0.003 85);
  --id-fill: oklch(0.93 0.004 85 / 7%);
  --id-rule: oklch(0.93 0.004 85 / 9%);
  --id-rule-strong: oklch(0.93 0.004 85 / 22%);
  --id-ink: oklch(0.93 0.004 85);
  --id-ink-2: oklch(0.76 0.004 85);
  --id-ink-3: oklch(0.62 0.004 85);
  --id-on-ink: oklch(0.17 0.003 85);
  --id-active: oklch(0.8 0.15 152);
  --id-ending: oklch(0.81 0.12 78);
  --id-refused: oklch(0.71 0.17 22);
  --id-edge: oklch(0.93 0.004 85 / 6%);
  --id-shade: oklch(0 0 0 / 0%);
}

@media (prefers-reduced-motion: reduce) {
  [data-application="identity"] {
    --id-quick: 0ms;
    --id-move: 0ms;
    --id-step: 0ms;
    --id-rise: 0rem;
  }
}