:root {
  --lo-font:         -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --lo-font-rounded: -apple-system, "SF Pro Rounded", ui-rounded, "Helvetica Neue", Helvetica, sans-serif;

  --lo-surface-base:      #F2F2F7;   /* screen behind lists            */
  --lo-surface-raised:    #FFFFFF;   /* list groups, cards, sheets     */
  --lo-surface-sunken:    #EFEFF4;   /* fields, segmented tracks       */
  --lo-content-primary:   #1A1A1C;   /* titles, totals, body          */
  --lo-content-secondary: #6C6C70;   /* display mode, subtitles       */
  --lo-content-separator: #C6C6CB;   /* hairlines, chevrons           */
  --lo-accent:            #0050BC;   /* sampled from the app icon     */
  --lo-accent-wash:       rgba(0, 80, 188, .12);
  --lo-success:           #248A3D;
  --lo-warning:           #B25000;
  --lo-destructive:       #D70015;
  --lo-neutral:           #8F8F94;

  --lo-counter-red:    #D9342B;   --lo-counter-orange: #C25E00;
  --lo-counter-amber:  #8F6B00;   --lo-counter-green:  #1E8A4C;
  --lo-counter-teal:   #0E7C86;   --lo-counter-blue:   #2E6BE6;
  --lo-counter-indigo: #5A45C4;   --lo-counter-purple: #9A2FA8;
  --lo-counter-pink:   #C02D64;   --lo-counter-brown:  #7A5140;

  --lo-space-1: 4px;   --lo-space-2: 8px;    --lo-space-3: 12px;
  --lo-space-4: 16px;  --lo-space-6: 24px;   --lo-space-8: 32px;   --lo-space-14: 56px;

  --lo-radius-sm: 8px; --lo-radius-md: 12px; --lo-radius-lg: 16px;
  --lo-radius-xl: 22px;                      --lo-radius-pill: 999px;

  --lo-elevation-flat:     none;
  --lo-elevation-hairline: inset 0 0 0 1px rgba(60, 60, 67, .14);
  --lo-elevation-floating: 0 10px 30px rgba(0, 0, 0, .16), inset 0 0 0 .5px rgba(255, 255, 255, .85);
  --lo-elevation-sheet:    0 -8px 40px rgba(0, 0, 0, .18);

  --lo-text-large-title:  700 34px/38px var(--lo-font);
  --lo-text-title-1:      600 28px/34px var(--lo-font);
  --lo-text-title-3:      600 20px/25px var(--lo-font);
  --lo-text-headline:     600 17px/22px var(--lo-font);
  --lo-text-body:         400 17px/24px var(--lo-font);
  --lo-text-subheadline:  400 15px/20px var(--lo-font);
  --lo-text-footnote:     400 13px/18px var(--lo-font);
  --lo-text-caption:      600 11px/16px var(--lo-font);
  --lo-num-total:         600 28px/32px var(--lo-font-rounded);
  --lo-num-stat:          600 22px/26px var(--lo-font-rounded);
}

@media (prefers-color-scheme: dark) {
  :root {
    --lo-surface-base:      #000000;
    --lo-surface-raised:    #1C1C1E;
    --lo-surface-sunken:    #2C2C2E;
    --lo-content-primary:   #FFFFFF;
    --lo-content-secondary: #A1A1A6;
    --lo-content-separator: #48484C;
    --lo-accent:            #6BA6FF;
    --lo-accent-wash:       rgba(107, 166, 255, .20);
    --lo-success:           #30D158;
    --lo-warning:           #FF9F0A;
    --lo-destructive:       #FF453A;
    --lo-neutral:           #8E8E93;

    --lo-counter-red:    #FF6B62;   --lo-counter-orange: #FF9F45;
    --lo-counter-amber:  #F2C744;   --lo-counter-green:  #4CD98A;
    --lo-counter-teal:   #3FD0DA;   --lo-counter-blue:   #7CA0FF;
    --lo-counter-indigo: #AFA0FF;   --lo-counter-purple: #E48BF0;
    --lo-counter-pink:   #FF8CB0;   --lo-counter-brown:  #C99A80;

    --lo-elevation-hairline: inset 0 0 0 1px rgba(84, 84, 88, .50);
    --lo-elevation-floating: 0 10px 30px rgba(0, 0, 0, .45), inset 0 0 0 .5px rgba(255, 255, 255, .14);
  }
}