/* Clarifiance design tokens.
   Single source of truth for the marketing site and the Quasar app.
   Direction: reviewed animated concept. Charcoal and green,
   data in tabular numerals.
   The SCSS mirror of this file is tokens.scss. Change both together. */

:root {
  color-scheme: light;

  /* Surfaces and ink */
  --cl-ground:       #F4F5F2;
  --cl-surface:      #FFFFFF;
  --cl-surface-2:    #EEF2ED;
  --cl-ink:          #202B27;
  --cl-body:         #435248;
  --cl-muted:        #66736C;
  --cl-line:         #DCE2DB;
  --cl-line-strong:  #A9B8AE;

  /* Signal: one accent, used for action and for a passed state */
  --cl-signal:       #245E49;
  --cl-signal-soft:  #E8F1E9;
  --cl-signal-on:    #FFFFFF;

  /* Gate: anything waiting on a person */
  --cl-gate:         #A2680B;
  --cl-gate-soft:    #F6EEDC;

  /* Stop: a failed check or a refused run. Not the accent. */
  --cl-stop:         #A32014;
  --cl-stop-soft:    #F8E7E4;

  /* Type */
  --cl-font-display: system-ui, -apple-system, "Segoe UI", sans-serif;
  --cl-font-body:    system-ui, -apple-system, "Segoe UI", sans-serif;
  --cl-font-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --cl-text-xs:      0.72rem;
  --cl-text-sm:      0.86rem;
  --cl-text-base:    1rem;
  --cl-text-lg:      1.12rem;
  --cl-text-xl:      1.4rem;
  --cl-text-2xl:     clamp(1.5rem, 3.6vw, 1.9rem);
  --cl-text-3xl:     clamp(2.3rem, 6vw, 3.5rem);

  --cl-track-tight:  -0.028em;
  --cl-track-label:  0.14em;
  --cl-leading-tight: 1.06;
  --cl-leading-body:  1.6;

  /* Space, 4px steps */
  --cl-s1: 4px;
  --cl-s2: 8px;
  --cl-s3: 12px;
  --cl-s4: 16px;
  --cl-s5: 24px;
  --cl-s6: 32px;
  --cl-s7: 48px;
  --cl-s8: 64px;

  /* Rounded surfaces for the reviewed landing-page direction. */
  --cl-radius:    12px;
  --cl-radius-lg: 16px;
  --cl-border:    1px solid var(--cl-line);
  --cl-border-strong: 1px solid var(--cl-line-strong);

  /* Layout */
  --cl-measure: 42em;
  --cl-shell:   1000px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --cl-ground:      #171B19;
    --cl-surface:     #1E2521;
    --cl-surface-2:   #232B26;
    --cl-ink:         #EDF2ED;
    --cl-body:        #BAC6BD;
    --cl-muted:       #98A69C;
    --cl-line:        #324038;
    --cl-line-strong: #4C5D52;
    --cl-signal:      #A4DBBD;
    --cl-signal-soft: #31483A;
    --cl-signal-on:   #183627;
    --cl-gate:        #D9A94B;
    --cl-gate-soft:   #2D2512;
    --cl-stop:        #E7756A;
    --cl-stop-soft:   #341916;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --cl-ground:      #171B19;
  --cl-surface:     #1E2521;
  --cl-surface-2:   #232B26;
  --cl-ink:         #EDF2ED;
  --cl-body:        #BAC6BD;
  --cl-muted:       #98A69C;
  --cl-line:        #324038;
  --cl-line-strong: #4C5D52;
  --cl-signal:      #A4DBBD;
  --cl-signal-soft: #31483A;
  --cl-signal-on:   #183627;
  --cl-gate:        #D9A94B;
  --cl-gate-soft:   #2D2512;
  --cl-stop:        #E7756A;
  --cl-stop-soft:   #341916;
}