/* ENYO Metronome for the web: the Mac app's design tokens.
   Values come from the app's asset catalogs and macOS's own label colours (spec/shell.md §12).
   Light is the default; dark follows the system unless Settings › Appearance says otherwise
   (html[data-theme]); Stage Mode is always dark (html.stage). */

:root {
  /* Text: every size from 10 to 17 px is written `calc(Npx * var(--text-scale))`. The Mac's
     point sizes read small in a browser, so they are all raised by one factor here. Kept at 1:
     Stage Mode (stage.css, sized to the window), the chart axes (drawn to fixed geometry) and the
     phone tab bar's labels (already as wide as a tab). Home's shrink-to-fit text reads it too. */
  --text-scale: 1.12;

  /* Accent: AccentColor, light and dark. */
  --accent: #E8961A;
  --accent-text: #98620F;          /* accent used as text on light surfaces */
  --on-accent: #1E1203;            /* ink on amber */
  --accent-15: rgba(232, 150, 26, 0.15);
  --lit-tile: #FFC062;

  /* macOS label colours. */
  --label: rgba(0, 0, 0, 0.85);
  --label-2: rgba(0, 0, 0, 0.50);
  --label-3: rgba(0, 0, 0, 0.26);
  --label-4: rgba(0, 0, 0, 0.10);
  --hairline: rgba(0, 0, 0, 0.10);
  --fill: rgba(0, 0, 0, 0.10);          /* field fill, quaternary */
  --chip: rgba(0, 0, 0, 0.08);           /* primary @ 8 % */
  --hover: rgba(0, 0, 0, 0.04);          /* primary @ 4 % */
  --pressed: rgba(0, 0, 0, 0.08);

  /* Surfaces. */
  --page: #F2F2F7;                 /* groupedPage */
  --row: #FFFFFF;                  /* groupedRow: cards */
  --row-inset: #F2F2F7;
  --plain: #FFFFFF;                /* Search, Library */
  --gray2: #AEAEB2;
  --gray3: #C7C7CC;
  --gray4: #D1D1D6;
  --gray5: #E5E5EA;
  --gray6: #F2F2F7;
  --green: #34C759;
  --red: #FF3B30;
  --blue: #007AFF;
  --scrim: rgba(0, 0, 0, 0.18);

  /* Glass: sidebar, mini player, tab bar, search field. */
  --glass: rgba(255, 255, 255, 0.78);
  --glass-edge: rgba(0, 0, 0, 0.06);
  --glass-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 8px 24px rgba(0, 0, 0, 0.08);
  --sidebar: rgba(250, 250, 252, 0.72);
  --sidebar-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 6px 20px rgba(0, 0, 0, 0.06);
  --sheet: #FFFFFF;
  --sheet-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.12), 0 20px 60px rgba(0, 0, 0, 0.22);
  --menu: rgba(246, 246, 246, 0.92);
  --menu-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.14), 0 10px 30px rgba(0, 0, 0, 0.18);
  --card-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);

  /* Home's amber wash. */
  --wash-0: #FFC062;
  --wash-1: #FFD596;
  --wash-2: #FFE9C9;
  --wash-3: #F2F2F7;

  /* Type. Mac text styles: largeTitle 26, title 22, title2 17, title3 15, headline 13 bold,
     body 13, callout 12, subheadline 11, footnote/caption 10. */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Inter, system-ui, sans-serif;
  --font-rounded: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-serif: ui-serif, "New York", Georgia, "Times New Roman", serif;

  --radius-card: 22px;
  --radius-sheet: 16px;
  --sidebar-w: 92px;
  --toolbar-h: 52px;
  --col: 760px;
  --snappy: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease: cubic-bezier(0.42, 0, 0.58, 1);

  color-scheme: light;
}

/* Dark, by the system (unless Light was chosen) or by choice. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --accent: #FFB340;
    --accent-text: #FFB340;
    --accent-15: rgba(255, 179, 64, 0.15);
    --lit-tile: #CC8819;
    --label: rgba(255, 255, 255, 0.85);
    --label-2: rgba(255, 255, 255, 0.55);
    --label-3: rgba(255, 255, 255, 0.25);
    --label-4: rgba(255, 255, 255, 0.10);
    --hairline: rgba(255, 255, 255, 0.10);
    --fill: rgba(255, 255, 255, 0.10);
    --chip: rgba(255, 255, 255, 0.08);
    --hover: rgba(255, 255, 255, 0.04);
    --pressed: rgba(255, 255, 255, 0.08);
    --page: #000000;
    --row: #1C1C1E;
    --row-inset: #2C2C2E;
    --plain: #1E1E1E;
    --gray2: #636366;
    --gray3: #48484A;
    --gray4: #3A3A3C;
    --gray5: #2C2C2E;
    --gray6: #1C1C1E;
    --green: #30D158;
    --red: #FF453A;
    --blue: #0A84FF;
    --scrim: rgba(0, 0, 0, 0.45);
    --glass: rgba(255, 255, 255, 0.075);
    --glass-edge: rgba(255, 255, 255, 0.08);
    --glass-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    --sidebar: rgba(255, 255, 255, 0.055);
    --sidebar-shadow: none;
    --sheet: #1E1E1E;
    --sheet-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.12), 0 20px 60px rgba(0, 0, 0, 0.6);
    --menu: rgba(40, 40, 40, 0.92);
    --menu-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.14), 0 10px 30px rgba(0, 0, 0, 0.5);
    --card-shadow: none;
    --wash-0: rgba(255, 170, 31, 0.62);
    --wash-1: rgba(255, 170, 31, 0.38);
    --wash-2: rgba(255, 170, 31, 0.16);
    --wash-3: rgba(255, 170, 31, 0);
    color-scheme: dark;
  }
}

/* The same dark values, for an explicit choice and for Stage Mode, which is always dark. */
:root[data-theme="dark"], :root.stage {
  --accent: #FFB340;
  --accent-text: #FFB340;
  --accent-15: rgba(255, 179, 64, 0.15);
  --lit-tile: #CC8819;
  --label: rgba(255, 255, 255, 0.85);
  --label-2: rgba(255, 255, 255, 0.55);
  --label-3: rgba(255, 255, 255, 0.25);
  --label-4: rgba(255, 255, 255, 0.10);
  --hairline: rgba(255, 255, 255, 0.10);
  --fill: rgba(255, 255, 255, 0.10);
  --chip: rgba(255, 255, 255, 0.08);
  --hover: rgba(255, 255, 255, 0.04);
  --pressed: rgba(255, 255, 255, 0.08);
  --page: #000000;
  --row: #1C1C1E;
  --row-inset: #2C2C2E;
  --plain: #1E1E1E;
  --gray2: #636366;
  --gray3: #48484A;
  --gray4: #3A3A3C;
  --gray5: #2C2C2E;
  --gray6: #1C1C1E;
  --green: #30D158;
  --red: #FF453A;
  --blue: #0A84FF;
  --scrim: rgba(0, 0, 0, 0.45);
  --glass: rgba(255, 255, 255, 0.075);
  --glass-edge: rgba(255, 255, 255, 0.08);
  --glass-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  --sidebar: rgba(255, 255, 255, 0.055);
  --sidebar-shadow: none;
  --sheet: #1E1E1E;
  --sheet-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.12), 0 20px 60px rgba(0, 0, 0, 0.6);
  --menu: rgba(40, 40, 40, 0.92);
  --menu-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.14), 0 10px 30px rgba(0, 0, 0, 0.5);
  --card-shadow: none;
  --wash-0: rgba(255, 170, 31, 0.62);
  --wash-1: rgba(255, 170, 31, 0.38);
  --wash-2: rgba(255, 170, 31, 0.16);
  --wash-3: rgba(255, 170, 31, 0);
  color-scheme: dark;
}