/*
  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.

  Light and dark both come from light-dark(), so setting color-scheme on :root is the only switch
  the theme toggle needs.
*/

/* 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:        light-dark(#f1f3f0, #0f1412);
    --surface:      light-dark(#ffffff, #171e1b);
    --surface-sunk: light-dark(#e9ede9, #121816);
    --ink:          light-dark(#131a17, #e6ece8);
    --ink-2:        light-dark(#566159, #9aa8a1);
    --ink-3:        light-dark(#7c8880, #6e7c76);
    --rule:         light-dark(#d7ddd8, #28322d);
    --rule-strong:  light-dark(#b9c2bc, #3a4640);

    /* 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:      light-dark(#1b5a93, #7cb6e8);
    --accent-ink:  light-dark(#ffffff, #08121c);
    --accent-soft: light-dark(#e4eef8, #14283f);


    --money:        light-dark(#14664a, #55c193);
    --money-ink:    light-dark(#ffffff, #08130f);
    --money-soft:   light-dark(#e2f0e9, #12312a);
    --owing:        light-dark(#9e3720, #e8836b);
    --owing-ink:    light-dark(#ffffff, #1c0c07);
    --owing-soft:   light-dark(#fbe7e2, #35201c);

    /* 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;

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

    --tap: 2.25rem;

  }

  /* Honour an explicit choice; light-dark() follows color-scheme, so this is the whole toggle. */
  :root[data-theme="light"] { color-scheme: light; }
  :root[data-theme="dark"]  { color-scheme: dark; }
}