/*
  Osmosis design tokens.

  Colour is reserved for money and for what is overdue. Everything else is ink on paper, so that a
  cleaner glancing at a phone in daylight sees the two things that matter without reading.

  The palette is declared twice: light on :root, dark in the two places a document can be dark, so
  the dark values are written once for the system preference and once for the explicit choice. Do
  not fold these into light-dark(). Safari only added that function in 17.5, and iPads that stop at
  iPadOS 15.8 or 16.7 cannot install it. On those an unknown function in a var() makes every
  declaration that reads the token invalid, which strips the app of every background, border and
  colour it has. test/assets/stylesheet_browser_support_test.rb guards this.
*/

/* Later layers win over earlier ones regardless of specificity. */
@layer tokens, reset, base, scaffold, components, layout, screens;

@layer tokens {
  :root {
    color-scheme: light dark;

    /* Paper and ink */
    --paper:        #f1f3f0;
    --surface:      #ffffff;
    --surface-sunk: #e9ede9;
    --ink:          #131a17;
    --ink-2:        #566159;
    --ink-3:        #7c8880;
    --rule:         #d7ddd8;
    --rule-strong:  #b9c2bc;

    /* Three hues, one job each: accent for what you can act on, green for money in, rust for
       money owed. Nothing else in the interface carries colour. */
    --accent:      #1b5a93;
    --accent-ink:  #ffffff;
    --accent-soft: #e4eef8;

    --money:        #14664a;
    --money-ink:    #ffffff;
    --money-soft:   #e2f0e9;
    --owing:        #9e3720;
    --owing-ink:    #ffffff;
    --owing-soft:   #fbe7e2;

    --shadow-sheet: 0 1px 2px rgb(19 26 23 / 8%),
                    0 8px 24px rgb(19 26 23 / 8%);

    /* Two faces. Archivo does the work, because its numerals stay unambiguous at small sizes on a
       phone held at a gate. Bricolage Grotesque carries the identity on headings and big figures. */
    --face: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --face-display: "Bricolage Grotesque", var(--face);

    --text-xs:   0.75rem;   /* 12 */
    --text-sm:   0.875rem;  /* 14 */
    --text:      1rem;      /* 16 */
    --text-lg:   1.25rem;   /* 20 */
    --text-xl:   1.5rem;    /* 24 */
    --text-2xl:  2rem;      /* 32 */

    --leading-tight: 1.2;
    --leading:       1.5;

    /* Spacing, a 4px rhythm */
    --s-1: 0.25rem;
    --s-2: 0.5rem;
    --s-3: 0.75rem;
    --s-4: 1rem;
    --s-5: 1.5rem;
    --s-6: 2rem;
    --s-7: 3rem;

    --radius:    4px;
    --radius-lg: 8px;

    /* A ledger is a column of names against a column of figures. */
    --measure: 68ch;
    --page:    76rem;

    --tap: 2.25rem;
  }

  /*
    The dark palette. The two blocks below hold the same declarations and have to be changed
    together: the first covers a device set to dark that has not been overridden in the app, the
    second covers picking Dark in the account menu on a device set to light.
  */
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --paper:        #0f1412;
      --surface:      #171e1b;
      --surface-sunk: #121816;
      --ink:          #e6ece8;
      --ink-2:        #9aa8a1;
      --ink-3:        #6e7c76;
      --rule:         #28322d;
      --rule-strong:  #3a4640;

      --accent:      #7cb6e8;
      --accent-ink:  #08121c;
      --accent-soft: #14283f;

      --money:        #55c193;
      --money-ink:    #08130f;
      --money-soft:   #12312a;
      --owing:        #e8836b;
      --owing-ink:    #1c0c07;
      --owing-soft:   #35201c;

      --shadow-sheet: 0 1px 2px rgb(0 0 0 / 40%),
                      0 8px 24px rgb(0 0 0 / 40%);
    }
  }

  :root[data-theme="dark"] {
    --paper:        #0f1412;
    --surface:      #171e1b;
    --surface-sunk: #121816;
    --ink:          #e6ece8;
    --ink-2:        #9aa8a1;
    --ink-3:        #6e7c76;
    --rule:         #28322d;
    --rule-strong:  #3a4640;

    --accent:      #7cb6e8;
    --accent-ink:  #08121c;
    --accent-soft: #14283f;

    --money:        #55c193;
    --money-ink:    #08130f;
    --money-soft:   #12312a;
    --owing:        #e8836b;
    --owing-ink:    #1c0c07;
    --owing-soft:   #35201c;

    --shadow-sheet: 0 1px 2px rgb(0 0 0 / 40%),
                    0 8px 24px rgb(0 0 0 / 40%);
  }

  /* Keep the native form controls and scrollbars in step with the chosen theme. */
  :root[data-theme="light"] { color-scheme: light; }
  :root[data-theme="dark"]  { color-scheme: dark; }
}