/* C11: one source for color, type, shape and depth. */
@font-face {
  font-family: Golos;
  src: url('./assets/GolosText-c11.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --bg: #0B0F12;
  --surface-1: #151A1F;
  --surface-2: #1D242A;
  --surface-3: #262F36;
  --hairline: rgba(255, 255, 255, .08);
  --hairline-str: rgba(255, 255, 255, .14);
  --text: #F2F5F4;
  --text-2: #A8B4B8;
  --text-3: #95A3A8;
  --overlay: rgba(6, 9, 11, .72);
  --energy: #FFB357;
  --protein: #4FD6C0;
  --water: #6BC8FF;
  --sleep: #A79BFF;
  --training: #FF8A6B;
  --ok: #5FD38D;
  --warn: #FFC266;
  --action: #F2F5F4;
  --action-text: #0B0F12;
  --action-2: #1D242A;
  --focus: #8DF0DE;
  --error: #FFAAA1;
  --photo-text: #FFFFFF;
  --photo-shade: rgba(8, 11, 13, .84);
  --glass: rgba(11, 15, 18, .68);
  --glass-line: rgba(255, 255, 255, .24);
  --photo-caption-shade: rgba(8, 11, 13, .68);
  --instrument-light: rgba(255, 255, 255, .035);
  --scene-shadow: rgba(0, 0, 0, .24);
  --r-lg: 22px;
  --r-md: 16px;
  --r-sm: 10px;
  --r-pill: 999px;
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --elev-1: 0 1px 0 var(--hairline) inset, 0 8px 24px rgba(0, 0, 0, .28);
  --elev-2: 0 1px 0 var(--hairline-str) inset, 0 18px 48px rgba(0, 0, 0, .42);
  --font: Golos, Arial, sans-serif;
  --scale: 1;
  --display: 2.125rem;
  --title: 1.375rem;
  --body: 1rem;
  --body-s: .9375rem;
  --label: .8125rem;
  --caption: .75rem;
  --metric-xl: 2.75rem;
  --metric-l: 1.75rem;
  /* Compatibility names for existing functional screens. */
  --card: var(--surface-1);
  --layer: var(--surface-2);
  --ink: var(--text);
  --muted: var(--text-2);
  --line: var(--hairline-str);
  --accent: var(--energy);
  --mint: var(--protein);
  --lilac: var(--sleep);
  --btn: var(--action);
  --btn-text: var(--action-text);
  --shadow: var(--elev-1);
}

:root[data-theme='light'] {
  color-scheme: light;
  --bg: #F5F7F6;
  --surface-1: #FFFFFF;
  --surface-2: #EDF1F0;
  --surface-3: #E3E9E7;
  --hairline: rgba(14, 26, 29, .10);
  --hairline-str: rgba(14, 26, 29, .16);
  --text: #0E1A1D;
  --text-2: #55676B;
  --text-3: #57686C;
  --energy: #8A4B00;
  --protein: #0E6B5E;
  --water: #0B5D86;
  --sleep: #4B3FB0;
  --training: #A33A16;
  --ok: #246B40;
  --warn: #8A4B00;
  --action: #0E2B2F;
  --action-text: #FFFFFF;
  --action-2: #EDF1F0;
  --focus: #0E6B5E;
  --error: #A52A24;
  --instrument-light: rgba(255, 255, 255, .65);
  --scene-shadow: rgba(14, 26, 29, .08);
  --elev-1: 0 1px 2px rgba(14, 26, 29, .06), 0 10px 30px rgba(14, 26, 29, .06);
  --elev-2: 0 1px 0 var(--hairline-str) inset, 0 18px 48px rgba(14, 26, 29, .18);
}