/* The values come from the mockup in docs/design/mockup (gen_common.py), except the glass, which is clearer and
   leaves out its buttercup tint and glow. lib/design_tokens.rb measures the contrast pairs and
   test/lib/design_tokens_test.rb checks them, so a changed value here is re-measured. */
:root {
  --sb-black: #000000;
  --sb-paper: #FFFFFF;
  --sb-buttercup: #FFD60A;
  --sb-glow: #FFFAE5;
  --sb-alarm: #C8102E;
  --sb-graphite: #5C5C5C;
  --sb-field-border: #6B6B6B;
  --sb-divider: #E4E4E4;

  --sb-text: var(--sb-black);
  --sb-text-muted: var(--sb-graphite);
  --sb-text-on-dark: var(--sb-paper);
  --sb-text-danger: var(--sb-alarm);
  --sb-surface: var(--sb-paper);
  --sb-surface-waiting: var(--sb-glow);
  --sb-surface-inverse: var(--sb-black);
  --sb-accent: var(--sb-buttercup);
  --sb-danger: var(--sb-alarm);
  --sb-border: var(--sb-field-border);

  --sb-scrim-sheet: rgba(0, 0, 0, 0.32);
  --sb-scrim-dialog: rgba(0, 0, 0, 0.4);
  --sb-wash: rgba(0, 0, 0, 0.07);
  --sb-rule-on-glass: rgba(0, 0, 0, 0.2);
  --sb-badge-on-photo: rgba(0, 0, 0, 0.72);
  --sb-grabber: rgba(0, 0, 0, 0.3);
  /* A tilting card photo's glare, and the clear end of the glare and the rail's dots. */
  --sb-glare: rgba(255, 255, 255, 0.38);
  --sb-clear: rgba(255, 255, 255, 0);
  /* Every solid New card button: a white ring and a soft drop under it. */
  --sb-shadow-centre-action: 0 0 0 2px rgba(255, 255, 255, 0.9), 0 8px 18px -8px rgba(0, 0, 0, 0.5);

  /* Glass: chrome only. Bars sit at their floor, 46% white (black text 4.5:1 over a black photo);
     sheets, menus and dialogs never under 90% (alarm red 4.5:1 over black). */
  --sb-glass-bar: rgba(255, 255, 255, 0.46);
  --sb-glass-bar-floor: 0.46;
  --sb-glass-sheet: rgba(255, 255, 255, 0.9);
  --sb-glass-filter: blur(3px) saturate(180%) brightness(1.1);
  --sb-glass-rim:
    inset 0 1.5px 0 rgba(255, 255, 255, 1), inset 0 0 0 1px rgba(255, 255, 255, 0.85),
    inset 0 -1.5px 0 rgba(255, 255, 255, 0.9), inset 0 14px 18px -12px rgba(255, 255, 255, 1),
    inset 7px 0 10px -8px rgba(255, 255, 255, 0.9), inset -7px 0 10px -8px rgba(255, 255, 255, 0.9),
    inset 0 -12px 18px -12px rgba(0, 0, 0, 0.16), 0 0 0 0.5px rgba(0, 0, 0, 0.14),
    0 2px 6px rgba(0, 0, 0, 0.14), 0 20px 48px rgba(0, 0, 0, 0.24);
  --sb-glass-sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 40%);
  --sb-glass-solid-shadow: 0 0 0 1px rgba(0, 0, 0, 0.16), 0 8px 24px rgba(0, 0, 0, 0.12);

  /* Sizes are rem on the browser's 16px root, which the browser's text size scales. */
  --sb-font-text: 'Atkinson Hyperlegible Next', system-ui, sans-serif;
  --sb-font-hand: 'Shantell Sans', 'Atkinson Hyperlegible Next', system-ui, sans-serif;
  --sb-hand-settings: 'INFM' 70, 'BNCE' 12;
  --sb-weight-regular: 400;
  --sb-weight-medium: 500;
  --sb-weight-bold: 700;
  --sb-weight-heavy: 800;
  --sb-size-display-wide: 4.5rem; /* 72px, the day on a wide screen */
  --sb-size-display: 3rem;      /* 48px, the day on a phone */
  --sb-size-xxl: 2.25rem;       /* 36px */
  --sb-size-xl: 2rem;           /* 32px, page titles */
  --sb-size-l: 1.75rem;         /* 28px, section headings */
  --sb-size-m: 1.625rem;        /* 26px, sheet and dialog titles */
  --sb-size-name: 1.375rem;     /* 22px, children's names in rows */
  --sb-size-title: 1.3125rem;   /* 21px, small panel titles */
  --sb-size-hand-title: 1.25rem; /* 20px, the name in the switcher and list section titles */
  --sb-size-body: 1.125rem;     /* 18px */
  --sb-size-label: 1rem;        /* 16px, labels and small controls */
  --sb-size-hint: 0.9375rem;    /* 15px, hints and sub-lines */
  --sb-size-meta: 0.875rem;     /* 14px, badges and meta */
  --sb-size-tab: 0.84375rem;    /* 13.5px, tab labels */
  --sb-size-tab-five: 0.8125rem; /* 13px, labels on a five-tab bar */
  --sb-size-tab-small: 0.71875rem; /* 11.5px, five-tab labels under 360px wide */
  --sb-leading-tight: 1.1;
  --sb-leading-heading: 1.2;
  --sb-leading-body: 1.5;

  --sb-space-1: 0.25rem;   /* 4 */
  --sb-space-2: 0.5rem;    /* 8 */
  --sb-space-3: 0.75rem;   /* 12 */
  --sb-space-4: 1rem;      /* 16 */
  --sb-space-5: 1.25rem;   /* 20 */
  --sb-space-6: 1.5rem;    /* 24 */
  --sb-space-7: 2rem;      /* 32 */
  --sb-space-8: 2.5rem;    /* 40 */
  --sb-space-9: 3rem;      /* 48 */
  --sb-space-10: 4rem;     /* 64 */
  --sb-space-11: 4.5rem;   /* 72 */

  --sb-radius-pill: 999px;
  --sb-radius-control: 0.75rem;  /* 12, quiet buttons */
  --sb-radius-small: 0.875rem;   /* 14 */
  --sb-radius-field: 1rem;       /* 16 */
  --sb-radius-item: 1.125rem;    /* 18, menu items, checklists */
  --sb-radius-box: 1.25rem;      /* 20, alerts, uploads */
  --sb-radius-photo: 1.375rem;   /* 22 */
  --sb-radius-nav-item: 1.4375rem; /* 23, items in a glass nav */
  --sb-radius-tile: 1.5rem;      /* 24, tiles and boxed lists in sheets */
  --sb-radius-menu: 1.625rem;    /* 26, menus and card photos */
  --sb-radius-bar: 1.75rem;      /* 28 */
  --sb-radius-paper: 2rem;       /* 32 */
  --sb-radius-dialog: 2.125rem;  /* 34 */
  --sb-radius-tabbar: 2.25rem;   /* 36, the five-tab bar and the card list's paper on wide screens */
  --sb-radius-sheet: 2.375rem;   /* 38 */

  --sb-shadow-photo: 0 1px 2px rgba(0, 0, 0, 0.08), 0 26px 44px -22px rgba(0, 0, 0, 0.5);
  --sb-shadow-lift: 0 10px 22px -12px rgba(0, 0, 0, 0.5);
  --sb-shadow-toast: 0 12px 28px -12px rgba(0, 0, 0, 0.6);
  --sb-shadow-tile: 0 1px 2px rgba(0, 0, 0, 0.08);
  /* The sign-in panel beside the meadow on a wide screen. */
  --sb-shadow-panel: -18px 0 50px rgba(0, 0, 0, 0.08);

  /* The reduced motion setting sets these to 0 (base.css). */
  --sb-duration-quick: 150ms;
  --sb-duration-tilt: 180ms;
  --sb-ease: ease-out;

  /* Focus: a black ring in a white halo shows on paper, glow, glass and photos. */
  --sb-focus-ring: 3px solid var(--sb-black);
  --sb-focus-offset: 2px;
  --sb-focus-halo: 0 0 0 7px var(--sb-paper);

  --sb-target-min: 1.5rem;    /* 24, never smaller */
  --sb-target: 2.75rem;       /* 44, phones */
  --sb-target-main: 3.5rem;   /* 56, the main action */
  --sb-control: 3.25rem;      /* 52, fields and secondary buttons */

  --sb-layer-float: 3;
  --sb-layer-overlay: 4;
  --sb-layer-toast: 5;
  --sb-layer-dialog: 6;
}