/*
  Punch2Pen tokens. Generated by design/tokens/build.mjs from tokens.json.
  Do not edit by hand.

  Direction: the 2PEN logo. Brick red and a legal-yellow pad on Open graphite.
  Mono is the punch (clock, labels). Sans is the words. Archivo is the poster.
  Brand red is a fill with white type. REC (#FF453A) colors the recording state
  and nothing else.
  PLAY and LIVE are white. Focus rings are white.
*/
:root {
  color-scheme: dark;
  /* Primitives: graphite */
  --graphite-600: #4A4F5B;  /* Solid divider when alpha lines are not possible. */
  --graphite-700: #353943;  /* Hover on raised. */
  --graphite-800: #2A2D34;  /* Raised: pill, popover, sheet, Return to Live, inputs. */
  --graphite-850: #22242A;  /* Chrome: header, transport strip, status bar, site nav. */
  --graphite-900: #1E1E1E;  /* Window / editor behind the WebView. Site page ground. */
  --graphite-950: #14151A;  /* Transcript pane. Darkest surface. */

  /* Primitives: red (hue 1; 600 is the brand red from the 2PEN logo) */
  --red-50: #FBEAE9;
  --red-100: #F7D0CF;
  --red-200: #F1A9A7;  /* Accent hover on graphite. */
  --red-300: #EA7E7B;  /* Accent text on graphite. 6.7:1 on pane, 5.7:1 on chrome, 5.1:1 on raised. */
  --red-400: #DE615E;  /* Display emphasis on graphite (accent-strong). AA large only. */
  --red-500: #CF3430;  /* Fill hover. White on it 5.0:1. */
  --red-600: #AC2623;  /* Brand red. Fills with white type (6.9:1), and brand ink on the legal pad (6.0:1). Decorative only on graphite (2.7:1). */
  --red-700: #8C1F1D;
  --red-800: #691917;
  --red-900: #461210;
  --red-950: #290B0A;

  /* Roles. Names match the shipped plugin and site CSS. */
  --bg-deep: #1E1E1E;
  --bg-pane: #14151A;
  --bg-chrome: #22242A;
  --bg-raised: #2A2D34;
  --bg-hover: #353943;
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.14);
  --ink: #F3F4F6;
  --ink-2: rgba(243, 244, 246, 0.74);
  --ink-3: rgba(243, 244, 246, 0.54);
  --ink-4: rgba(243, 244, 246, 0.30);
  --accent: #EA7E7B;  /* Accent as text, icon, or line on graphite. */
  --accent-hover: #F1A9A7;
  --accent-strong: #DE615E;  /* Display-size emphasis on graphite (24 px bold and up): 4.4:1 on chrome, AA large. Reads as brick where red-300 reads pink. */
  --accent-ink: #FFFFFF;  /* Text on an accent fill. */
  --accent-fill: #AC2623;  /* Primary button and badge fill, with accent-ink type. 6.9:1. */
  --accent-fill-hover: #CF3430;
  --accent-dim: rgba(234, 126, 123, 0.14);  /* Red wash behind an accent icon or chip. */
  --accent-line: rgba(234, 126, 123, 0.4);  /* Border of a selected chip or shipped tag. */
  --highlight: rgba(249, 242, 188, 0.16);  /* Seek flash, selection, dictionary words. */
  --highlight-line: rgba(249, 242, 188, 0.62);
  --focus: #F3F4F6;  /* Focus ring. Ink, so focus never reads as recording. */
  --marker: #AC2623;  /* Brand ink on the pad. */
  --rec: #FF453A;
  --wait: #D7B07A;
  --play: #F3F4F6;  /* PLAY, LIVE, corrected. White: the pen is live. Red stays for the brand and REC. */
  --pad-paper: #F9F2BC;
  --pad-shade: #EEE4A4;
  --pad-rule: #A7D0D2;
  --pad-ink: #1C1917;
  --pad-ink-2: rgba(28, 25, 23, 0.68);
  --pad-accent: #AC2623;

  /* Type */
  --display: "Archivo", "Arial Narrow", "Roboto Condensed", system-ui, sans-serif;  /* Site and brand headlines only. Set with font-stretch 68% and weight 800 to 900. Loaded from Google Fonts on the site. Not loaded in the plugin. */
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Segoe UI", sans-serif;  /* UI text and lyrics. System face, no network. */
  --mono: "SF Mono", ui-monospace, Menlo, Consolas, monospace;  /* The punch: clock, bar and beat, badges, labels. */
  --display-stretch: 68%;
  --fs-plugin-badge: 9px;  /* Status badge caps. */
  --fs-plugin-micro: 10.5px;  /* Pill, transport caps. */
  --fs-plugin-body: 12px;  /* Status bar, popover body. */
  --fs-plugin-ui: 13px;  /* Wordmark, sheet input. */
  --fs-plugin-lyric: 16px;  /* Past and upcoming lines. */
  --fs-plugin-title: 24px;  /* Active line. Scales with the editor width. */
  --fs-xs: 12px;
  --fs-sm: 14px;
  --fs-md: 16px;
  --fs-lg: 18px;
  --fs-xl: 22px;
  --fs-2xl: 28px;
  --fs-3xl: 40px;
  --fs-4xl: 56px;
  --fs-5xl: 80px;
  --fs-6xl: 112px;

  /* Space */
  --space-0: 0px;
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 6px;
  --space-4: 8px;
  --space-5: 12px;
  --space-6: 16px;
  --space-7: 20px;
  --space-8: 24px;
  --space-9: 32px;
  --space-10: 40px;
  --space-11: 56px;
  --space-12: 80px;
  --space-13: 120px;

  /* Radius */
  --radius-xs: 3px;  /* Active-word plate. */
  --radius-sm: 5px;  /* Controls. Shipped --radius. */
  --radius-md: 8px;  /* Cards, sheets. */
  --radius-lg: 12px;  /* Plugin frame, site media. */
  --radius-pill: 999px;
  --radius: 5px;  /* Controls. Shipped --radius. */

  /* Motion */
  --t-fast: 120ms;  /* Hover, border, color. */
  --t-base: 200ms;  /* Sheet and popover in. */
  --t-slow: 320ms;  /* Synced scroll step. */
  --t-hold: 750ms;  /* Highlight holds on the last sung word after the final timestamp. */
  --t-pulse: 1300ms;  /* REC dot pulse. */
  --t-ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --t-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* Shadow */
  --shadow-pop: 0 12px 32px rgba(0, 0, 0, 0.45);  /* Popover, sheet. */
  --shadow-frame: 0 24px 48px rgba(0, 0, 0, 0.45);  /* Plugin window on the site. */
  --shadow-sheet: 0 1px 0 rgba(28, 25, 23, 0.06), 0 18px 40px rgba(0, 0, 0, 0.35);  /* Pad lyric sheet on graphite. */

  /* Lyric: Temporal Hierarchy */
  --past: 0.38;  /* Temporal Hierarchy opacity. Unchanged from HANDOFF.md. */
  --upcoming: 0.68;
  --active: 1;
  --lyric-lh: 1.42;
  --focal-play: 0.4;  /* Active line sits 40% down the pane during playback. */
  --focal-rec: 0.6;  /* 60% while recording. */
  --lyric-size: 16px;  /* Past and upcoming lines. */
  --title-size: 24px;  /* Active line. Scales with the editor width. */

  /* Layout */
  --plugin-width: 400px;  /* Default editor width (PluginEditor setSize). */
  --plugin-height: 600px;
  --plugin-min: 400px;  /* Minimum width and height. */
  --header-height: 44px;
  --transport-height: 30px;
  --status-height: 30px;
  --site-max: 1120px;
  --site-gutter: 24px;
}