/* ==========================================================================
   Storypool design tokens: "Galley"
   Generated from tokens/tokens.json. Do not hand-edit; regenerate.
   Light theme on :root, dark theme on [data-theme="dark"].
   Component tokens reference semantic tokens via var(), so they theme
   automatically; only tokens whose value changes appear in the dark block.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Schibsted+Grotesk:ital,wght@0,400..900;1,400..900&family=Newsreader:ital,opsz,wght@0,6..72,400..700;1,6..72,400..700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {

  /* color */
  --sp-color-paper-50: #FDFBF7;
  --sp-color-paper-100: #F7F3EA;
  --sp-color-paper-200: #ECE6D8;
  --sp-color-paper-300: #DCD3C2;
  --sp-color-paper-400: #BFB6A4;
  --sp-color-paper-500: #8B8271;
  --sp-color-paper-600: #6A6253;
  --sp-color-paper-700: #524C40;
  --sp-color-paper-800: #39352C;
  --sp-color-paper-900: #24211B;
  --sp-color-paper-950: #16140F;
  --sp-color-ink-50: #FCFAF7;
  --sp-color-ink-100: #F5F3F1;
  --sp-color-ink-200: #E8E6E3;
  --sp-color-ink-300: #D6D4D1;
  --sp-color-ink-400: #B9B7B5;
  --sp-color-ink-500: #858381;
  --sp-color-ink-600: #656361;
  --sp-color-ink-700: #4E4D4B;
  --sp-color-ink-800: #373533;
  --sp-color-ink-900: #262421;
  --sp-color-ink-950: #171614;
  --sp-color-ink-1000: #0F0E0D;
  --sp-color-pencil-50: #FFF3EE;
  --sp-color-pencil-100: #FFE8DF;
  --sp-color-pencil-200: #FFD1C1;
  --sp-color-pencil-300: #FFB39E;
  --sp-color-pencil-400: #FF896F;
  --sp-color-pencil-500: #E24328;
  --sp-color-pencil-600: #D0301A;
  --sp-color-pencil-700: #A6270F;
  --sp-color-pencil-800: #7A1B0A;
  --sp-color-pencil-900: #430802;
  --sp-color-pencil-950: #280804;
  --sp-color-cyan-50: #EFFDFF;
  --sp-color-cyan-100: #E0F8FF;
  --sp-color-cyan-200: #C3EEFE;
  --sp-color-cyan-300: #A0E0F6;
  --sp-color-cyan-400: #6EC5E2;
  --sp-color-cyan-500: #0F91B2;
  --sp-color-cyan-600: #007090;
  --sp-color-cyan-700: #005873;
  --sp-color-cyan-800: #003D51;
  --sp-color-cyan-900: #002732;
  --sp-color-cyan-950: #03171E;
  --sp-color-magenta-50: #FFF3FA;
  --sp-color-magenta-100: #FFE8F3;
  --sp-color-magenta-200: #FFD2E6;
  --sp-color-magenta-300: #FFB6D4;
  --sp-color-magenta-400: #FF8EB7;
  --sp-color-magenta-500: #CF4E83;
  --sp-color-magenta-600: #A92963;
  --sp-color-magenta-700: #88174D;
  --sp-color-magenta-800: #610E35;
  --sp-color-magenta-900: #3C0D21;
  --sp-color-magenta-950: #240914;
  --sp-color-yellow-50: #FFF9E8;
  --sp-color-yellow-100: #FFF1D6;
  --sp-color-yellow-200: #FFE2B0;
  --sp-color-yellow-300: #F8CD83;
  --sp-color-yellow-400: #E5AD43;
  --sp-color-yellow-500: #B47500;
  --sp-color-yellow-600: #915300;
  --sp-color-yellow-700: #743F00;
  --sp-color-yellow-800: #522B00;
  --sp-color-yellow-900: #331C00;
  --sp-color-yellow-950: #1E1100;
  --sp-color-green-50: #F1FEF3;
  --sp-color-green-100: #E5FAE8;
  --sp-color-green-200: #CCF2D2;
  --sp-color-green-300: #ADE4B7;
  --sp-color-green-400: #82CB92;
  --sp-color-green-500: #3E9858;
  --sp-color-green-600: #137738;
  --sp-color-green-700: #005E27;
  --sp-color-green-800: #00421A;
  --sp-color-green-900: #072912;
  --sp-color-green-950: #07180B;
  --sp-color-blue-50: #F1FBFF;
  --sp-color-blue-100: #E4F5FF;
  --sp-color-blue-200: #CBE9FF;
  --sp-color-blue-300: #ACD8FF;
  --sp-color-blue-400: #82BAFF;
  --sp-color-blue-500: #4384D5;
  --sp-color-blue-600: #2063B0;
  --sp-color-blue-700: #104C8F;
  --sp-color-blue-800: #093566;
  --sp-color-blue-900: #0A223F;
  --sp-color-blue-950: #071425;
  --sp-color-teal-50: #EFFEFC;
  --sp-color-teal-100: #E1F9F7;
  --sp-color-teal-200: #C5F0ED;
  --sp-color-teal-300: #A2E3DE;
  --sp-color-teal-400: #72C9C3;
  --sp-color-teal-500: #1B9690;
  --sp-color-teal-600: #007570;
  --sp-color-teal-700: #005C58;
  --sp-color-teal-800: #00403D;
  --sp-color-teal-900: #002826;
  --sp-color-teal-950: #031817;
  --sp-color-nonrepro-50: #F3FCFF;
  --sp-color-nonrepro-100: #EAF6FB;
  --sp-color-nonrepro-200: #D6EAF3;
  --sp-color-nonrepro-300: #BCDAE6;
  --sp-color-nonrepro-400: #98BECE;
  --sp-color-nonrepro-500: #5F8B9C;
  --sp-color-nonrepro-600: #3F6A7B;
  --sp-color-nonrepro-700: #2D5361;
  --sp-color-nonrepro-800: #1E3A44;
  --sp-color-nonrepro-900: #14242B;
  --sp-color-nonrepro-950: #0C1519;
  --sp-color-white: #FFFFFF;
  --sp-color-black: #000000;

  /* font */
  --sp-font-family-ui: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", sans-serif;
  --sp-font-family-display: Newsreader, Georgia, "Times New Roman", serif;
  --sp-font-family-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --sp-font-size-2xs: 10px;
  --sp-font-size-xs: 11px;
  --sp-font-size-sm: 12px;
  --sp-font-size-md: 13px;
  --sp-font-size-lg: 14px;
  --sp-font-size-xl: 16px;
  --sp-font-size-2xl: 18px;
  --sp-font-size-3xl: 22px;
  --sp-font-size-4xl: 28px;
  --sp-font-size-5xl: 36px;
  --sp-font-lineHeight-none: 1;
  --sp-font-lineHeight-tight: 1.2;
  --sp-font-lineHeight-snug: 1.3;
  --sp-font-lineHeight-normal: 1.45;
  --sp-font-lineHeight-relaxed: 1.6;
  --sp-font-weight-regular: 400;
  --sp-font-weight-medium: 500;
  --sp-font-weight-semibold: 600;
  --sp-font-weight-bold: 700;
  --sp-font-letterSpacing-tight: -0.015em;
  --sp-font-letterSpacing-snug: -0.005em;
  --sp-font-letterSpacing-normal: 0em;
  --sp-font-letterSpacing-wide: 0.04em;
  --sp-font-letterSpacing-wider: 0.08em;

  /* typography */
  --sp-typography-body-family: var(--sp-font-family-ui);
  --sp-typography-body-size: var(--sp-font-size-md);
  --sp-typography-body-weight: var(--sp-font-weight-regular);
  --sp-typography-body-line-height: var(--sp-font-lineHeight-normal);
  --sp-typography-body-letter-spacing: var(--sp-font-letterSpacing-normal);
  --sp-typography-body-sm-family: var(--sp-font-family-ui);
  --sp-typography-body-sm-size: var(--sp-font-size-sm);
  --sp-typography-body-sm-weight: var(--sp-font-weight-regular);
  --sp-typography-body-sm-line-height: var(--sp-font-lineHeight-normal);
  --sp-typography-body-sm-letter-spacing: var(--sp-font-letterSpacing-normal);
  --sp-typography-body-lg-family: var(--sp-font-family-ui);
  --sp-typography-body-lg-size: var(--sp-font-size-lg);
  --sp-typography-body-lg-weight: var(--sp-font-weight-regular);
  --sp-typography-body-lg-line-height: var(--sp-font-lineHeight-normal);
  --sp-typography-body-lg-letter-spacing: var(--sp-font-letterSpacing-normal);
  --sp-typography-label-family: var(--sp-font-family-ui);
  --sp-typography-label-size: var(--sp-font-size-md);
  --sp-typography-label-weight: var(--sp-font-weight-medium);
  --sp-typography-label-line-height: var(--sp-font-lineHeight-tight);
  --sp-typography-label-letter-spacing: var(--sp-font-letterSpacing-normal);
  --sp-typography-caps-label-family: var(--sp-font-family-ui);
  --sp-typography-caps-label-size: var(--sp-font-size-xs);
  --sp-typography-caps-label-weight: var(--sp-font-weight-semibold);
  --sp-typography-caps-label-line-height: var(--sp-font-lineHeight-tight);
  --sp-typography-caps-label-letter-spacing: var(--sp-font-letterSpacing-wider);
  --sp-typography-title-family: var(--sp-font-family-display);
  --sp-typography-title-size: var(--sp-font-size-xl);
  --sp-typography-title-weight: var(--sp-font-weight-semibold);
  --sp-typography-title-line-height: var(--sp-font-lineHeight-snug);
  --sp-typography-title-letter-spacing: var(--sp-font-letterSpacing-snug);
  --sp-typography-headline-family: var(--sp-font-family-display);
  --sp-typography-headline-size: var(--sp-font-size-3xl);
  --sp-typography-headline-weight: var(--sp-font-weight-semibold);
  --sp-typography-headline-line-height: var(--sp-font-lineHeight-tight);
  --sp-typography-headline-letter-spacing: var(--sp-font-letterSpacing-tight);
  --sp-typography-display-family: var(--sp-font-family-display);
  --sp-typography-display-size: var(--sp-font-size-4xl);
  --sp-typography-display-weight: var(--sp-font-weight-medium);
  --sp-typography-display-line-height: var(--sp-font-lineHeight-tight);
  --sp-typography-display-letter-spacing: var(--sp-font-letterSpacing-tight);
  --sp-typography-slug-family: var(--sp-font-family-mono);
  --sp-typography-slug-size: var(--sp-font-size-xs);
  --sp-typography-slug-weight: var(--sp-font-weight-medium);
  --sp-typography-slug-line-height: var(--sp-font-lineHeight-tight);
  --sp-typography-slug-letter-spacing: var(--sp-font-letterSpacing-wide);
  --sp-typography-mono-family: var(--sp-font-family-mono);
  --sp-typography-mono-size: var(--sp-font-size-sm);
  --sp-typography-mono-weight: var(--sp-font-weight-regular);
  --sp-typography-mono-line-height: var(--sp-font-lineHeight-normal);
  --sp-typography-mono-letter-spacing: var(--sp-font-letterSpacing-normal);

  /* space */
  --sp-space-0: 0px;
  --sp-space-px: 1px;
  --sp-space-half: 2px;
  --sp-space-1: 4px;
  --sp-space-2: 8px;
  --sp-space-3: 12px;
  --sp-space-4: 16px;
  --sp-space-5: 20px;
  --sp-space-6: 24px;
  --sp-space-8: 32px;
  --sp-space-10: 40px;
  --sp-space-12: 48px;
  --sp-space-16: 64px;
  --sp-space-20: 80px;

  /* radius */
  --sp-radius-none: 0px;
  --sp-radius-xs: 2px;
  --sp-radius-sm: 3px;
  --sp-radius-md: 4px;
  --sp-radius-lg: 6px;

  /* borderWidth */
  --sp-borderWidth-hairline: 1px;
  --sp-borderWidth-rule: 2px;
  --sp-borderWidth-heavy: 3px;

  /* elevation */
  --sp-elevation-flat: 0px 0px 0px 0px #17161400;
  --sp-elevation-raised: 0px 1px 0px 0px #1716140F;
  --sp-elevation-overlay: 0px 4px 12px -2px #17161424, 0px 1px 2px 0px #17161414;
  --sp-elevation-modal: 0px 16px 40px -8px #1716143D, 0px 2px 6px 0px #1716141A;

  /* motion */
  --sp-motion-duration-instant: 0ms;
  --sp-motion-duration-fast: 80ms;
  --sp-motion-duration-base: 140ms;
  --sp-motion-duration-slow: 220ms;
  --sp-motion-duration-deliberate: 320ms;
  --sp-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --sp-motion-easing-enter: cubic-bezier(0, 0, 0.2, 1);
  --sp-motion-easing-exit: cubic-bezier(0.4, 0, 1, 1);
  --sp-motion-easing-linear: cubic-bezier(0, 0, 1, 1);

  /* zIndex */
  --sp-zIndex-base: 0;
  --sp-zIndex-raised: 1;
  --sp-zIndex-sticky: 10;
  --sp-zIndex-sidebar: 20;
  --sp-zIndex-dropdown: 100;
  --sp-zIndex-popover: 200;
  --sp-zIndex-overlay: 300;
  --sp-zIndex-modal: 400;
  --sp-zIndex-toast: 500;
  --sp-zIndex-tooltip: 600;

  /* density */
  --sp-density-row-compact: 28px;
  --sp-density-row-default: 32px;
  --sp-density-row-comfortable: 40px;
  --sp-density-control-sm: 24px;
  --sp-density-control-md: 28px;
  --sp-density-control-lg: 32px;
  --sp-density-icon-sm: 14px;
  --sp-density-icon-md: 16px;
  --sp-density-icon-lg: 20px;
  --sp-density-sidebar-width: 232px;
  --sp-density-sidebar-collapsed: 48px;
  --sp-density-topbar-height: 44px;
  --sp-density-content-maxWidth: 1440px;
  --sp-density-content-gutter: 16px;
  --sp-density-content-column: 72px;

  /* mobile */
  --sp-mobile-font-size-xs: 11px;
  --sp-mobile-font-size-sm: 12px;
  --sp-mobile-font-size-md: 13px;
  --sp-mobile-font-size-base-sm: 15px;
  --sp-mobile-font-size-base: 16px;
  --sp-mobile-font-size-lg: 17px;
  --sp-mobile-font-size-xl: 20px;
  --sp-mobile-font-size-2xl: 24px;
  --sp-mobile-font-size-3xl: 32px;
  --sp-mobile-font-lineHeight-copy: 1.55;
  --sp-mobile-typography-body-family: var(--sp-font-family-ui);
  --sp-mobile-typography-body-size: var(--sp-mobile-font-size-base);
  --sp-mobile-typography-body-weight: var(--sp-font-weight-regular);
  --sp-mobile-typography-body-line-height: var(--sp-font-lineHeight-normal);
  --sp-mobile-typography-body-letter-spacing: var(--sp-font-letterSpacing-normal);
  --sp-mobile-typography-body-sm-family: var(--sp-font-family-ui);
  --sp-mobile-typography-body-sm-size: var(--sp-mobile-font-size-base-sm);
  --sp-mobile-typography-body-sm-weight: var(--sp-font-weight-regular);
  --sp-mobile-typography-body-sm-line-height: var(--sp-font-lineHeight-normal);
  --sp-mobile-typography-body-sm-letter-spacing: var(--sp-font-letterSpacing-normal);
  --sp-mobile-typography-meta-family: var(--sp-font-family-ui);
  --sp-mobile-typography-meta-size: var(--sp-mobile-font-size-md);
  --sp-mobile-typography-meta-weight: var(--sp-font-weight-regular);
  --sp-mobile-typography-meta-line-height: var(--sp-font-lineHeight-snug);
  --sp-mobile-typography-meta-letter-spacing: var(--sp-font-letterSpacing-normal);
  --sp-mobile-typography-label-family: var(--sp-font-family-ui);
  --sp-mobile-typography-label-size: var(--sp-mobile-font-size-base);
  --sp-mobile-typography-label-weight: var(--sp-font-weight-medium);
  --sp-mobile-typography-label-line-height: var(--sp-font-lineHeight-tight);
  --sp-mobile-typography-label-letter-spacing: var(--sp-font-letterSpacing-normal);
  --sp-mobile-typography-caps-label-family: var(--sp-font-family-ui);
  --sp-mobile-typography-caps-label-size: var(--sp-mobile-font-size-sm);
  --sp-mobile-typography-caps-label-weight: var(--sp-font-weight-semibold);
  --sp-mobile-typography-caps-label-line-height: var(--sp-font-lineHeight-tight);
  --sp-mobile-typography-caps-label-letter-spacing: var(--sp-font-letterSpacing-wider);
  --sp-mobile-typography-title-family: var(--sp-font-family-display);
  --sp-mobile-typography-title-size: var(--sp-mobile-font-size-lg);
  --sp-mobile-typography-title-weight: var(--sp-font-weight-semibold);
  --sp-mobile-typography-title-line-height: var(--sp-font-lineHeight-snug);
  --sp-mobile-typography-title-letter-spacing: var(--sp-font-letterSpacing-snug);
  --sp-mobile-typography-headline-family: var(--sp-font-family-display);
  --sp-mobile-typography-headline-size: var(--sp-mobile-font-size-xl);
  --sp-mobile-typography-headline-weight: var(--sp-font-weight-semibold);
  --sp-mobile-typography-headline-line-height: var(--sp-font-lineHeight-tight);
  --sp-mobile-typography-headline-letter-spacing: var(--sp-font-letterSpacing-tight);
  --sp-mobile-typography-display-family: var(--sp-font-family-display);
  --sp-mobile-typography-display-size: var(--sp-mobile-font-size-2xl);
  --sp-mobile-typography-display-weight: var(--sp-font-weight-semibold);
  --sp-mobile-typography-display-line-height: var(--sp-font-lineHeight-tight);
  --sp-mobile-typography-display-letter-spacing: var(--sp-font-letterSpacing-tight);
  --sp-mobile-typography-copy-family: var(--sp-font-family-display);
  --sp-mobile-typography-copy-size: var(--sp-mobile-font-size-base);
  --sp-mobile-typography-copy-weight: var(--sp-font-weight-regular);
  --sp-mobile-typography-copy-line-height: var(--sp-mobile-font-lineHeight-copy);
  --sp-mobile-typography-copy-letter-spacing: var(--sp-font-letterSpacing-normal);
  --sp-mobile-typography-slug-family: var(--sp-font-family-mono);
  --sp-mobile-typography-slug-size: var(--sp-mobile-font-size-sm);
  --sp-mobile-typography-slug-weight: var(--sp-font-weight-medium);
  --sp-mobile-typography-slug-line-height: var(--sp-font-lineHeight-tight);
  --sp-mobile-typography-slug-letter-spacing: var(--sp-font-letterSpacing-wide);
  --sp-mobile-typography-countdown-family: var(--sp-font-family-mono);
  --sp-mobile-typography-countdown-size: var(--sp-mobile-font-size-xl);
  --sp-mobile-typography-countdown-weight: var(--sp-font-weight-medium);
  --sp-mobile-typography-countdown-line-height: var(--sp-font-lineHeight-none);
  --sp-mobile-typography-countdown-letter-spacing: var(--sp-font-letterSpacing-normal);
  --sp-mobile-touch-min: 44px;
  --sp-mobile-touch-comfortable: 48px;
  --sp-mobile-touch-gap: 8px;
  --sp-mobile-space-gutter: 16px;
  --sp-mobile-space-row-inset: 16px;
  --sp-mobile-space-stack: 12px;
  --sp-mobile-space-section: 24px;
  --sp-mobile-space-thumb-reach: 60%;
  --sp-mobile-safe-area-top: env(safe-area-inset-top, 0px);
  --sp-mobile-safe-area-bottom: env(safe-area-inset-bottom, 0px);
  --sp-mobile-safe-area-left: env(safe-area-inset-left, 0px);
  --sp-mobile-safe-area-right: env(safe-area-inset-right, 0px);
  --sp-mobile-bar-nav: 48px;
  --sp-mobile-bar-tab: 56px;
  --sp-mobile-bar-action: 56px;
  --sp-mobile-bar-search: 40px;
  --sp-mobile-bar-accessory: 44px;
  --sp-mobile-bar-banner: 28px;
  --sp-mobile-sheet-radius: 12px;
  --sp-mobile-sheet-radius-fullscreen: 0px;
  --sp-mobile-sheet-grabber-width: 36px;
  --sp-mobile-sheet-grabber-height: 4px;
  --sp-mobile-sheet-grabber-radius: 2px;
  --sp-mobile-sheet-grabber: var(--sp-semantic-border-strong);
  --sp-mobile-sheet-bg: var(--sp-semantic-surface-raised);
  --sp-mobile-sheet-border: var(--sp-semantic-border-default);
  --sp-mobile-sheet-scrim: var(--sp-semantic-surface-overlay);
  --sp-mobile-sheet-header-height: 56px;
  --sp-mobile-sheet-detent-medium: 50%;
  --sp-mobile-sheet-detent-large: 92%;
  --sp-mobile-row-single: 44px;
  --sp-mobile-row-double: 56px;
  --sp-mobile-row-story: 72px;
  --sp-mobile-row-rich: 88px;
  --sp-mobile-chip-height: 24px;
  --sp-mobile-chip-padding-x: 8px;
  --sp-mobile-chip-font-size: var(--sp-mobile-font-size-sm);
  --sp-mobile-chip-glyph-size: 10px;
  --sp-mobile-chip-dot-size: 10px;
  --sp-mobile-control-sm: 36px;
  --sp-mobile-control-md: 44px;
  --sp-mobile-control-lg: 48px;
  --sp-mobile-icon-sm: 16px;
  --sp-mobile-icon-md: 20px;
  --sp-mobile-icon-lg: 24px;
  --sp-mobile-radius-control: 4px;
  --sp-mobile-radius-chip: var(--sp-radius-xs);
  --sp-mobile-radius-card: var(--sp-radius-none);
  --sp-mobile-radius-dialog: 8px;
  --sp-mobile-radius-sheet: var(--sp-mobile-sheet-radius);
  --sp-mobile-motion-sheet-enter: 260ms;
  --sp-mobile-motion-sheet-exit: 200ms;
  --sp-mobile-motion-tab-switch: 0ms;
  --sp-mobile-motion-pull-refresh: 220ms;
  --sp-mobile-motion-toast: 140ms;
  --sp-mobile-motion-sync-pulse: 1200ms;
  --sp-mobile-haptic-tap: selection;
  --sp-mobile-haptic-confirm: notification.success;
  --sp-mobile-haptic-warn: notification.warning;
  --sp-mobile-haptic-error: notification.error;
  --sp-mobile-haptic-drag: impact.light;
  --sp-mobile-haptic-deadline: impact.medium;

  /* semantic */
  --sp-semantic-surface-canvas: var(--sp-color-paper-100);
  --sp-semantic-surface-raised: var(--sp-color-paper-50);
  --sp-semantic-surface-sunken: var(--sp-color-paper-200);
  --sp-semantic-surface-hover: var(--sp-color-paper-200);
  --sp-semantic-surface-active: var(--sp-color-paper-300);
  --sp-semantic-surface-selected: var(--sp-color-pencil-50);
  --sp-semantic-surface-inverse: var(--sp-color-ink-900);
  --sp-semantic-surface-inverse-hover: var(--sp-color-ink-800);
  --sp-semantic-surface-inverse-active: var(--sp-color-ink-700);
  --sp-semantic-surface-overlay: #1716148C;
  --sp-semantic-text-primary: var(--sp-color-ink-900);
  --sp-semantic-text-secondary: var(--sp-color-ink-700);
  --sp-semantic-text-muted: var(--sp-color-ink-600);
  --sp-semantic-text-placeholder: var(--sp-color-ink-500);
  --sp-semantic-text-disabled: var(--sp-color-ink-400);
  --sp-semantic-text-inverse: var(--sp-color-paper-50);
  --sp-semantic-text-accent: var(--sp-color-pencil-600);
  --sp-semantic-text-link: var(--sp-color-ink-900);
  --sp-semantic-border-subtle: var(--sp-color-paper-200);
  --sp-semantic-border-default: var(--sp-color-paper-300);
  --sp-semantic-border-strong: var(--sp-color-ink-500);
  --sp-semantic-border-rule: var(--sp-color-ink-900);
  --sp-semantic-border-inverse: var(--sp-color-paper-50);
  --sp-semantic-accent-default: var(--sp-color-pencil-600);
  --sp-semantic-accent-hover: var(--sp-color-pencil-700);
  --sp-semantic-accent-active: var(--sp-color-pencil-800);
  --sp-semantic-accent-subtle: var(--sp-color-pencil-50);
  --sp-semantic-accent-subtle-border: var(--sp-color-pencil-200);
  --sp-semantic-accent-fg-on: var(--sp-color-white);
  --sp-semantic-focus-ring: var(--sp-color-ink-900);
  --sp-semantic-focus-ring-offset: var(--sp-color-paper-100);
  --sp-semantic-success-fg: var(--sp-color-green-700);
  --sp-semantic-success-bg: var(--sp-color-green-50);
  --sp-semantic-success-border: var(--sp-color-green-200);
  --sp-semantic-success-solid: var(--sp-color-green-600);
  --sp-semantic-warning-fg: var(--sp-color-yellow-700);
  --sp-semantic-warning-bg: var(--sp-color-yellow-50);
  --sp-semantic-warning-border: var(--sp-color-yellow-200);
  --sp-semantic-warning-solid: var(--sp-color-yellow-600);
  --sp-semantic-danger-fg: var(--sp-color-magenta-700);
  --sp-semantic-danger-bg: var(--sp-color-magenta-50);
  --sp-semantic-danger-border: var(--sp-color-magenta-200);
  --sp-semantic-danger-solid: var(--sp-color-magenta-600);
  --sp-semantic-danger-fg-on: var(--sp-color-white);
  --sp-semantic-info-fg: var(--sp-color-cyan-700);
  --sp-semantic-info-bg: var(--sp-color-cyan-50);
  --sp-semantic-info-border: var(--sp-color-cyan-200);
  --sp-semantic-info-solid: var(--sp-color-cyan-600);

  /* status */
  --sp-status-pitch-fg: var(--sp-color-ink-600);
  --sp-status-pitch-bg: var(--sp-color-paper-200);
  --sp-status-pitch-border: var(--sp-color-paper-300);
  --sp-status-pitch-solid: var(--sp-color-ink-500);
  --sp-status-pitch-glyph: "○";
  --sp-status-assigned-fg: var(--sp-color-blue-700);
  --sp-status-assigned-bg: var(--sp-color-blue-50);
  --sp-status-assigned-border: var(--sp-color-blue-200);
  --sp-status-assigned-solid: var(--sp-color-blue-600);
  --sp-status-assigned-glyph: "◐";
  --sp-status-reporting-fg: var(--sp-color-teal-700);
  --sp-status-reporting-bg: var(--sp-color-teal-50);
  --sp-status-reporting-border: var(--sp-color-teal-200);
  --sp-status-reporting-solid: var(--sp-color-teal-600);
  --sp-status-reporting-glyph: "●";
  --sp-status-editing-fg: var(--sp-color-pencil-700);
  --sp-status-editing-bg: var(--sp-color-pencil-50);
  --sp-status-editing-border: var(--sp-color-pencil-200);
  --sp-status-editing-solid: var(--sp-color-pencil-600);
  --sp-status-editing-glyph: "□";
  --sp-status-copy-desk-fg: var(--sp-color-yellow-700);
  --sp-status-copy-desk-bg: var(--sp-color-yellow-50);
  --sp-status-copy-desk-border: var(--sp-color-yellow-200);
  --sp-status-copy-desk-solid: var(--sp-color-yellow-600);
  --sp-status-copy-desk-glyph: "◧";
  --sp-status-ready-fg: var(--sp-color-green-700);
  --sp-status-ready-bg: var(--sp-color-green-50);
  --sp-status-ready-border: var(--sp-color-green-200);
  --sp-status-ready-solid: var(--sp-color-green-600);
  --sp-status-ready-glyph: "■";
  --sp-status-published-fg: var(--sp-color-paper-50);
  --sp-status-published-bg: var(--sp-color-ink-900);
  --sp-status-published-border: var(--sp-color-ink-900);
  --sp-status-published-solid: var(--sp-color-ink-900);
  --sp-status-published-glyph: "◆";
  --sp-status-killed-fg: var(--sp-color-ink-600);
  --sp-status-killed-bg: var(--sp-color-paper-50);
  --sp-status-killed-border: var(--sp-color-ink-300);
  --sp-status-killed-solid: var(--sp-color-ink-500);
  --sp-status-killed-glyph: "✕";
  --sp-status-killed-border-style: dashed;
  --sp-status-killed-text-decoration: line-through;

  /* channel */
  --sp-channel-print-fg: var(--sp-color-ink-900);
  --sp-channel-print-bg: var(--sp-color-paper-200);
  --sp-channel-print-border: var(--sp-color-ink-400);
  --sp-channel-print-solid: var(--sp-color-ink-900);
  --sp-channel-print-glyph: "▭";
  --sp-channel-digital-fg: var(--sp-color-cyan-700);
  --sp-channel-digital-bg: var(--sp-color-cyan-50);
  --sp-channel-digital-border: var(--sp-color-cyan-300);
  --sp-channel-digital-solid: var(--sp-color-cyan-600);
  --sp-channel-digital-glyph: "•";
  --sp-channel-digital-web-solid: var(--sp-color-cyan-600);
  --sp-channel-digital-web-fg: var(--sp-color-cyan-700);
  --sp-channel-digital-web-bg: var(--sp-color-cyan-50);
  --sp-channel-digital-web-glyph: "•";
  --sp-channel-digital-app-solid: var(--sp-color-blue-600);
  --sp-channel-digital-app-fg: var(--sp-color-blue-700);
  --sp-channel-digital-app-bg: var(--sp-color-blue-50);
  --sp-channel-digital-app-glyph: "▢";
  --sp-channel-digital-social-solid: var(--sp-color-magenta-600);
  --sp-channel-digital-social-fg: var(--sp-color-magenta-700);
  --sp-channel-digital-social-bg: var(--sp-color-magenta-50);
  --sp-channel-digital-social-glyph: "◌";
  --sp-channel-digital-newsletter-solid: var(--sp-color-yellow-600);
  --sp-channel-digital-newsletter-fg: var(--sp-color-yellow-700);
  --sp-channel-digital-newsletter-bg: var(--sp-color-yellow-50);
  --sp-channel-digital-newsletter-glyph: "≡";

  /* revision */
  --sp-revision-insert-fg: var(--sp-color-pencil-700);
  --sp-revision-insert-line: var(--sp-color-pencil-600);
  --sp-revision-insert-line-style: solid;
  --sp-revision-insert-line-thickness: 1px;
  --sp-revision-insert-line-offset: 2px;
  --sp-revision-insert-bg-hover: var(--sp-color-pencil-50);
  --sp-revision-insert-glyph: "+";
  --sp-revision-delete-fg: var(--sp-color-ink-600);
  --sp-revision-delete-line: var(--sp-color-pencil-600);
  --sp-revision-delete-line-style: line-through;
  --sp-revision-delete-line-thickness: 1px;
  --sp-revision-delete-bg-hover: var(--sp-color-pencil-50);
  --sp-revision-delete-glyph: "−";
  --sp-revision-comment-fg: var(--sp-semantic-text-primary);
  --sp-revision-comment-bg: var(--sp-color-yellow-100);
  --sp-revision-comment-bg-active: var(--sp-color-yellow-200);
  --sp-revision-comment-rule: var(--sp-color-yellow-600);
  --sp-revision-comment-card-bg: var(--sp-semantic-surface-raised);
  --sp-revision-comment-card-border: var(--sp-semantic-border-subtle);
  --sp-revision-comment-glyph: "▮";
  --sp-revision-margin-width: 240px;
  --sp-revision-margin-connector: var(--sp-semantic-border-default);
  --sp-revision-margin-author-font-family: var(--sp-typography-caps-label-family);
  --sp-revision-margin-author-font-size: var(--sp-typography-caps-label-size);
  --sp-revision-margin-author-font-weight: var(--sp-typography-caps-label-weight);
  --sp-revision-margin-author-font-line-height: var(--sp-typography-caps-label-line-height);
  --sp-revision-margin-author-font-letter-spacing: var(--sp-typography-caps-label-letter-spacing);
  --sp-revision-margin-body-font-family: var(--sp-typography-body-sm-family);
  --sp-revision-margin-body-font-size: var(--sp-typography-body-sm-size);
  --sp-revision-margin-body-font-weight: var(--sp-typography-body-sm-weight);
  --sp-revision-margin-body-font-line-height: var(--sp-typography-body-sm-line-height);
  --sp-revision-margin-body-font-letter-spacing: var(--sp-typography-body-sm-letter-spacing);
  --sp-revision-margin-time-font-family: var(--sp-typography-slug-family);
  --sp-revision-margin-time-font-size: var(--sp-typography-slug-size);
  --sp-revision-margin-time-font-weight: var(--sp-typography-slug-weight);
  --sp-revision-margin-time-font-line-height: var(--sp-typography-slug-line-height);
  --sp-revision-margin-time-font-letter-spacing: var(--sp-typography-slug-letter-spacing);

  /* agent */
  --sp-agent-fg: var(--sp-color-nonrepro-700);
  --sp-agent-bg: var(--sp-color-nonrepro-50);
  --sp-agent-bg-hover: var(--sp-color-nonrepro-100);
  --sp-agent-border: var(--sp-color-nonrepro-200);
  --sp-agent-solid: var(--sp-color-nonrepro-600);
  --sp-agent-fg-on: var(--sp-color-white);
  --sp-agent-glyph: "[•]";
  --sp-agent-avatar-radius: var(--sp-radius-xs);
  --sp-agent-mark-insert-fg: var(--sp-semantic-text-primary);
  --sp-agent-mark-insert-line: var(--sp-color-nonrepro-600);
  --sp-agent-mark-insert-line-style: dotted;
  --sp-agent-mark-delete-fg: var(--sp-semantic-text-muted);
  --sp-agent-mark-delete-line: var(--sp-color-nonrepro-600);
  --sp-agent-mark-delete-line-style: line-through dotted;
  --sp-agent-mark-line-thickness: 1.5px;
  --sp-agent-mark-line-offset: 3px;
  --sp-agent-mark-bg-focus: var(--sp-color-nonrepro-50);
  --sp-agent-mark-margin-glyph-size: 14px;
  --sp-agent-state-suggested-fg: var(--sp-color-nonrepro-700);
  --sp-agent-state-suggested-bg: var(--sp-color-nonrepro-50);
  --sp-agent-state-suggested-border: var(--sp-color-nonrepro-200);
  --sp-agent-state-suggested-glyph: "[•]";
  --sp-agent-state-running-fg: var(--sp-semantic-text-muted);
  --sp-agent-state-running-bg: var(--sp-semantic-surface-sunken);
  --sp-agent-state-running-border: var(--sp-semantic-border-subtle);
  --sp-agent-state-running-glyph: "[○]";
  --sp-agent-state-accepted-fg: var(--sp-semantic-text-primary);
  --sp-agent-state-accepted-bg: var(--sp-semantic-surface-raised);
  --sp-agent-state-accepted-border: var(--sp-semantic-border-default);
  --sp-agent-state-accepted-glyph: "[•]";
  --sp-agent-state-rejected-fg: var(--sp-semantic-text-muted);
  --sp-agent-state-rejected-bg: var(--sp-semantic-surface-raised);
  --sp-agent-state-rejected-border: var(--sp-semantic-border-subtle);
  --sp-agent-state-rejected-glyph: "[•]";
  --sp-agent-state-rejected-text-decoration: line-through;
  --sp-agent-state-needs-source-fg: var(--sp-semantic-warning-fg);
  --sp-agent-state-needs-source-bg: var(--sp-semantic-warning-bg);
  --sp-agent-state-needs-source-border: var(--sp-semantic-warning-border);
  --sp-agent-state-needs-source-glyph: "[○]";
  --sp-agent-confidence-segments: 3;
  --sp-agent-confidence-segment-width: 4px;
  --sp-agent-confidence-segment-height: 8px;
  --sp-agent-confidence-segment-gap: 2px;
  --sp-agent-confidence-filled: var(--sp-color-nonrepro-600);
  --sp-agent-confidence-empty: var(--sp-color-nonrepro-200);
  --sp-agent-confidence-labels: baixa · média · alta;
  --sp-agent-provenance-font-family: var(--sp-typography-slug-family);
  --sp-agent-provenance-font-size: var(--sp-typography-slug-size);
  --sp-agent-provenance-font-weight: var(--sp-typography-slug-weight);
  --sp-agent-provenance-font-line-height: var(--sp-typography-slug-line-height);
  --sp-agent-provenance-font-letter-spacing: var(--sp-typography-slug-letter-spacing);
  --sp-agent-provenance-fg: var(--sp-semantic-text-muted);
  --sp-agent-provenance-citation-fg: var(--sp-color-nonrepro-700);
  --sp-agent-provenance-quote-rail: var(--sp-color-nonrepro-600);
  --sp-agent-provenance-quote-bg: var(--sp-semantic-surface-sunken);
  --sp-agent-provenance-quote-font-family: var(--sp-typography-body-sm-family);
  --sp-agent-provenance-quote-font-size: var(--sp-typography-body-sm-size);
  --sp-agent-provenance-quote-font-weight: var(--sp-typography-body-sm-weight);
  --sp-agent-provenance-quote-font-line-height: var(--sp-typography-body-sm-line-height);
  --sp-agent-provenance-quote-font-letter-spacing: var(--sp-typography-body-sm-letter-spacing);
  --sp-agent-provenance-verified-fg: var(--sp-semantic-success-fg);
  --sp-agent-card-rail: var(--sp-color-nonrepro-600);
  --sp-agent-card-rail-width: var(--sp-borderWidth-heavy);
  --sp-agent-card-bg: var(--sp-semantic-surface-raised);
  --sp-agent-card-border: var(--sp-color-nonrepro-200);
  --sp-agent-card-header-font-family: var(--sp-typography-caps-label-family);
  --sp-agent-card-header-font-size: var(--sp-typography-caps-label-size);
  --sp-agent-card-header-font-weight: var(--sp-typography-caps-label-weight);
  --sp-agent-card-header-font-line-height: var(--sp-typography-caps-label-line-height);
  --sp-agent-card-header-font-letter-spacing: var(--sp-typography-caps-label-letter-spacing);
  --sp-agent-card-radius: var(--sp-radius-none);
  --sp-agent-card-accept-button: primary;
  --sp-agent-motion-pulse: 1000ms;
  --sp-agent-motion-accept: 320ms;

  /* sync */
  --sp-sync-synced-fg: var(--sp-semantic-text-muted);
  --sp-sync-synced-bg: #17161400;
  --sp-sync-synced-solid: var(--sp-color-ink-500);
  --sp-sync-synced-glyph: "●";
  --sp-sync-pending-fg: var(--sp-semantic-text-muted);
  --sp-sync-pending-bg: #17161400;
  --sp-sync-pending-solid: var(--sp-color-ink-500);
  --sp-sync-pending-glyph: "○";
  --sp-sync-syncing-fg: var(--sp-semantic-text-muted);
  --sp-sync-syncing-bg: #17161400;
  --sp-sync-syncing-solid: var(--sp-color-ink-500);
  --sp-sync-syncing-glyph: "◐";
  --sp-sync-offline-fg: var(--sp-semantic-warning-fg);
  --sp-sync-offline-bg: var(--sp-semantic-warning-bg);
  --sp-sync-offline-border: var(--sp-semantic-warning-border);
  --sp-sync-offline-solid: var(--sp-semantic-warning-solid);
  --sp-sync-offline-glyph: "⊘";
  --sp-sync-conflict-fg: var(--sp-semantic-danger-fg);
  --sp-sync-conflict-bg: var(--sp-semantic-danger-bg);
  --sp-sync-conflict-border: var(--sp-semantic-danger-border);
  --sp-sync-conflict-solid: var(--sp-semantic-danger-solid);
  --sp-sync-conflict-glyph: "⊗";

  /* component.button */
  --sp-component-button-height-sm: var(--sp-density-control-sm);
  --sp-component-button-height-md: var(--sp-density-control-md);
  --sp-component-button-height-lg: var(--sp-density-control-lg);
  --sp-component-button-padding-x-sm: var(--sp-space-2);
  --sp-component-button-padding-x-md: var(--sp-space-3);
  --sp-component-button-padding-x-lg: var(--sp-space-4);
  --sp-component-button-gap: var(--sp-space-1);
  --sp-component-button-radius: var(--sp-radius-sm);
  --sp-component-button-border-width: var(--sp-borderWidth-hairline);
  --sp-component-button-font-family: var(--sp-typography-label-family);
  --sp-component-button-font-size: var(--sp-typography-label-size);
  --sp-component-button-font-weight: var(--sp-typography-label-weight);
  --sp-component-button-font-line-height: var(--sp-typography-label-line-height);
  --sp-component-button-font-letter-spacing: var(--sp-typography-label-letter-spacing);
  --sp-component-button-primary-bg: var(--sp-semantic-surface-inverse);
  --sp-component-button-primary-fg: var(--sp-semantic-text-inverse);
  --sp-component-button-primary-border: var(--sp-semantic-surface-inverse);
  --sp-component-button-primary-bg-hover: var(--sp-semantic-surface-inverse-hover);
  --sp-component-button-primary-bg-active: var(--sp-semantic-surface-inverse-active);
  --sp-component-button-accent-bg: var(--sp-semantic-accent-default);
  --sp-component-button-accent-fg: var(--sp-semantic-accent-fg-on);
  --sp-component-button-accent-border: var(--sp-semantic-accent-default);
  --sp-component-button-accent-bg-hover: var(--sp-semantic-accent-hover);
  --sp-component-button-accent-bg-active: var(--sp-semantic-accent-active);
  --sp-component-button-secondary-bg: var(--sp-semantic-surface-raised);
  --sp-component-button-secondary-fg: var(--sp-semantic-text-primary);
  --sp-component-button-secondary-border: var(--sp-semantic-border-default);
  --sp-component-button-secondary-bg-hover: var(--sp-semantic-surface-hover);
  --sp-component-button-secondary-bg-active: var(--sp-semantic-surface-active);
  --sp-component-button-secondary-border-hover: var(--sp-semantic-border-strong);
  --sp-component-button-ghost-bg: #17161400;
  --sp-component-button-ghost-fg: var(--sp-semantic-text-secondary);
  --sp-component-button-ghost-border: #17161400;
  --sp-component-button-ghost-bg-hover: var(--sp-semantic-surface-hover);
  --sp-component-button-ghost-bg-active: var(--sp-semantic-surface-active);
  --sp-component-button-ghost-fg-hover: var(--sp-semantic-text-primary);
  --sp-component-button-danger-bg: var(--sp-semantic-danger-solid);
  --sp-component-button-danger-fg: var(--sp-semantic-danger-fg-on);
  --sp-component-button-danger-border: var(--sp-semantic-danger-solid);
  --sp-component-button-danger-bg-hover: var(--sp-semantic-danger-fg);
  --sp-component-button-danger-bg-active: var(--sp-semantic-danger-fg);
  --sp-component-button-disabled-bg: var(--sp-semantic-surface-sunken);
  --sp-component-button-disabled-fg: var(--sp-semantic-text-disabled);
  --sp-component-button-disabled-border: var(--sp-semantic-border-subtle);

  /* component.input */
  --sp-component-input-height: var(--sp-density-control-md);
  --sp-component-input-padding-x: var(--sp-space-2);
  --sp-component-input-radius: var(--sp-radius-sm);
  --sp-component-input-border-width: var(--sp-borderWidth-hairline);
  --sp-component-input-font-family: var(--sp-typography-body-family);
  --sp-component-input-font-size: var(--sp-typography-body-size);
  --sp-component-input-font-weight: var(--sp-typography-body-weight);
  --sp-component-input-font-line-height: var(--sp-typography-body-line-height);
  --sp-component-input-font-letter-spacing: var(--sp-typography-body-letter-spacing);
  --sp-component-input-bg: var(--sp-semantic-surface-raised);
  --sp-component-input-bg-disabled: var(--sp-semantic-surface-sunken);
  --sp-component-input-fg: var(--sp-semantic-text-primary);
  --sp-component-input-placeholder: var(--sp-semantic-text-placeholder);
  --sp-component-input-border: var(--sp-semantic-border-default);
  --sp-component-input-border-hover: var(--sp-semantic-border-strong);
  --sp-component-input-border-focus: var(--sp-semantic-focus-ring);
  --sp-component-input-border-invalid: var(--sp-semantic-danger-solid);
  --sp-component-input-label: var(--sp-semantic-text-secondary);
  --sp-component-input-help: var(--sp-semantic-text-muted);

  /* component.story-card */
  --sp-component-story-card-bg: var(--sp-semantic-surface-raised);
  --sp-component-story-card-bg-hover: var(--sp-semantic-surface-hover);
  --sp-component-story-card-bg-selected: var(--sp-semantic-surface-selected);
  --sp-component-story-card-border: var(--sp-semantic-border-subtle);
  --sp-component-story-card-border-hover: var(--sp-semantic-border-default);
  --sp-component-story-card-border-selected: var(--sp-semantic-accent-default);
  --sp-component-story-card-rail-width: var(--sp-borderWidth-heavy);
  --sp-component-story-card-radius: var(--sp-radius-none);
  --sp-component-story-card-padding: var(--sp-space-3);
  --sp-component-story-card-gap: var(--sp-space-1);
  --sp-component-story-card-title: var(--sp-semantic-text-primary);
  --sp-component-story-card-title-font-family: var(--sp-typography-title-family);
  --sp-component-story-card-title-font-size: var(--sp-typography-title-size);
  --sp-component-story-card-title-font-weight: var(--sp-typography-title-weight);
  --sp-component-story-card-title-font-line-height: var(--sp-typography-title-line-height);
  --sp-component-story-card-title-font-letter-spacing: var(--sp-typography-title-letter-spacing);
  --sp-component-story-card-slug: var(--sp-semantic-text-muted);
  --sp-component-story-card-slug-font-family: var(--sp-typography-slug-family);
  --sp-component-story-card-slug-font-size: var(--sp-typography-slug-size);
  --sp-component-story-card-slug-font-weight: var(--sp-typography-slug-weight);
  --sp-component-story-card-slug-font-line-height: var(--sp-typography-slug-line-height);
  --sp-component-story-card-slug-font-letter-spacing: var(--sp-typography-slug-letter-spacing);
  --sp-component-story-card-meta: var(--sp-semantic-text-muted);
  --sp-component-story-card-meta-font-family: var(--sp-typography-body-sm-family);
  --sp-component-story-card-meta-font-size: var(--sp-typography-body-sm-size);
  --sp-component-story-card-meta-font-weight: var(--sp-typography-body-sm-weight);
  --sp-component-story-card-meta-font-line-height: var(--sp-typography-body-sm-line-height);
  --sp-component-story-card-meta-font-letter-spacing: var(--sp-typography-body-sm-letter-spacing);
  --sp-component-story-card-deadline-due: var(--sp-semantic-warning-fg);
  --sp-component-story-card-deadline-late: var(--sp-semantic-danger-fg);
  --sp-component-story-card-elevation: var(--sp-elevation-flat);
  --sp-component-story-card-elevation-dragging: var(--sp-elevation-overlay);

  /* component.status-chip */
  --sp-component-status-chip-height: 20px;
  --sp-component-status-chip-padding-x: var(--sp-space-2);
  --sp-component-status-chip-gap: var(--sp-space-1);
  --sp-component-status-chip-radius: var(--sp-radius-xs);
  --sp-component-status-chip-border-width: var(--sp-borderWidth-hairline);
  --sp-component-status-chip-font-family: var(--sp-typography-caps-label-family);
  --sp-component-status-chip-font-size: var(--sp-typography-caps-label-size);
  --sp-component-status-chip-font-weight: var(--sp-typography-caps-label-weight);
  --sp-component-status-chip-font-line-height: var(--sp-typography-caps-label-line-height);
  --sp-component-status-chip-font-letter-spacing: var(--sp-typography-caps-label-letter-spacing);
  --sp-component-status-chip-glyph-size: 9px;
  --sp-component-status-chip-dot-size: 8px;

  /* component.sidebar */
  --sp-component-sidebar-width: var(--sp-density-sidebar-width);
  --sp-component-sidebar-width-collapsed: var(--sp-density-sidebar-collapsed);
  --sp-component-sidebar-bg: var(--sp-semantic-surface-sunken);
  --sp-component-sidebar-border: var(--sp-semantic-border-default);
  --sp-component-sidebar-fg: var(--sp-semantic-text-secondary);
  --sp-component-sidebar-section-label: var(--sp-semantic-text-muted);
  --sp-component-sidebar-section-font-family: var(--sp-typography-caps-label-family);
  --sp-component-sidebar-section-font-size: var(--sp-typography-caps-label-size);
  --sp-component-sidebar-section-font-weight: var(--sp-typography-caps-label-weight);
  --sp-component-sidebar-section-font-line-height: var(--sp-typography-caps-label-line-height);
  --sp-component-sidebar-section-font-letter-spacing: var(--sp-typography-caps-label-letter-spacing);
  --sp-component-sidebar-item-height: var(--sp-density-control-md);
  --sp-component-sidebar-item-padding-x: var(--sp-space-2);
  --sp-component-sidebar-item-radius: var(--sp-radius-sm);
  --sp-component-sidebar-item-font-family: var(--sp-typography-label-family);
  --sp-component-sidebar-item-font-size: var(--sp-typography-label-size);
  --sp-component-sidebar-item-font-weight: var(--sp-typography-label-weight);
  --sp-component-sidebar-item-font-line-height: var(--sp-typography-label-line-height);
  --sp-component-sidebar-item-font-letter-spacing: var(--sp-typography-label-letter-spacing);
  --sp-component-sidebar-item-bg-hover: var(--sp-semantic-surface-active);
  --sp-component-sidebar-item-fg-hover: var(--sp-semantic-text-primary);
  --sp-component-sidebar-item-bg-active: var(--sp-semantic-surface-raised);
  --sp-component-sidebar-item-fg-active: var(--sp-semantic-text-primary);
  --sp-component-sidebar-item-indicator: var(--sp-semantic-accent-default);
  --sp-component-sidebar-item-indicator-width: var(--sp-borderWidth-rule);
  --sp-component-sidebar-count: var(--sp-semantic-text-muted);
  --sp-component-sidebar-count-font-family: var(--sp-typography-mono-family);
  --sp-component-sidebar-count-font-size: var(--sp-typography-mono-size);
  --sp-component-sidebar-count-font-weight: var(--sp-typography-mono-weight);
  --sp-component-sidebar-count-font-line-height: var(--sp-typography-mono-line-height);
  --sp-component-sidebar-count-font-letter-spacing: var(--sp-typography-mono-letter-spacing);

  /* component.table-row */
  --sp-component-table-row-height: var(--sp-density-row-default);
  --sp-component-table-row-height-compact: var(--sp-density-row-compact);
  --sp-component-table-row-cell-padding-x: var(--sp-space-2);
  --sp-component-table-row-bg: #17161400;
  --sp-component-table-row-bg-hover: var(--sp-semantic-surface-hover);
  --sp-component-table-row-bg-selected: var(--sp-semantic-surface-selected);
  --sp-component-table-row-border: var(--sp-semantic-border-subtle);
  --sp-component-table-row-border-width: var(--sp-borderWidth-hairline);
  --sp-component-table-row-rail-width: var(--sp-borderWidth-heavy);
  --sp-component-table-row-fg: var(--sp-semantic-text-primary);
  --sp-component-table-row-fg-secondary: var(--sp-semantic-text-muted);
  --sp-component-table-row-font-family: var(--sp-typography-body-family);
  --sp-component-table-row-font-size: var(--sp-typography-body-size);
  --sp-component-table-row-font-weight: var(--sp-typography-body-weight);
  --sp-component-table-row-font-line-height: var(--sp-typography-body-line-height);
  --sp-component-table-row-font-letter-spacing: var(--sp-typography-body-letter-spacing);
  --sp-component-table-row-numeric-font-family: var(--sp-typography-mono-family);
  --sp-component-table-row-numeric-font-size: var(--sp-typography-mono-size);
  --sp-component-table-row-numeric-font-weight: var(--sp-typography-mono-weight);
  --sp-component-table-row-numeric-font-line-height: var(--sp-typography-mono-line-height);
  --sp-component-table-row-numeric-font-letter-spacing: var(--sp-typography-mono-letter-spacing);
  --sp-component-table-row-header-bg: var(--sp-semantic-surface-canvas);
  --sp-component-table-row-header-fg: var(--sp-semantic-text-muted);
  --sp-component-table-row-header-border: var(--sp-semantic-border-rule);
  --sp-component-table-row-header-border-width: var(--sp-borderWidth-rule);
  --sp-component-table-row-header-font-family: var(--sp-typography-caps-label-family);
  --sp-component-table-row-header-font-size: var(--sp-typography-caps-label-size);
  --sp-component-table-row-header-font-weight: var(--sp-typography-caps-label-weight);
  --sp-component-table-row-header-font-line-height: var(--sp-typography-caps-label-line-height);
  --sp-component-table-row-header-font-letter-spacing: var(--sp-typography-caps-label-letter-spacing);
  --sp-component-table-row-header-height: var(--sp-density-row-compact);

  /* component.link */
  --sp-component-link-fg: var(--sp-semantic-text-link);
  --sp-component-link-underline: var(--sp-semantic-accent-default);
  --sp-component-link-fg-hover: var(--sp-semantic-accent-hover);

  /* component.tooltip */
  --sp-component-tooltip-bg: var(--sp-semantic-surface-inverse);
  --sp-component-tooltip-fg: var(--sp-semantic-text-inverse);
  --sp-component-tooltip-radius: var(--sp-radius-xs);
  --sp-component-tooltip-font-family: var(--sp-typography-body-sm-family);
  --sp-component-tooltip-font-size: var(--sp-typography-body-sm-size);
  --sp-component-tooltip-font-weight: var(--sp-typography-body-sm-weight);
  --sp-component-tooltip-font-line-height: var(--sp-typography-body-sm-line-height);
  --sp-component-tooltip-font-letter-spacing: var(--sp-typography-body-sm-letter-spacing);
  --sp-component-tooltip-padding-x: var(--sp-space-2);
  --sp-component-tooltip-padding-y: var(--sp-space-1);
}

[data-theme="dark"] {

  /* semantic */
  --sp-semantic-surface-canvas: var(--sp-color-ink-950);
  --sp-semantic-surface-raised: var(--sp-color-ink-900);
  --sp-semantic-surface-sunken: var(--sp-color-ink-1000);
  --sp-semantic-surface-hover: var(--sp-color-ink-800);
  --sp-semantic-surface-active: var(--sp-color-ink-700);
  --sp-semantic-surface-selected: var(--sp-color-pencil-950);
  --sp-semantic-surface-inverse: var(--sp-color-paper-100);
  --sp-semantic-surface-inverse-hover: var(--sp-color-paper-200);
  --sp-semantic-surface-inverse-active: var(--sp-color-paper-300);
  --sp-semantic-surface-overlay: #0F0E0DB2;
  --sp-semantic-text-primary: var(--sp-color-paper-100);
  --sp-semantic-text-secondary: var(--sp-color-paper-300);
  --sp-semantic-text-muted: var(--sp-color-ink-400);
  --sp-semantic-text-disabled: var(--sp-color-ink-600);
  --sp-semantic-text-inverse: var(--sp-color-ink-950);
  --sp-semantic-text-accent: var(--sp-color-pencil-400);
  --sp-semantic-text-link: var(--sp-color-paper-100);
  --sp-semantic-border-subtle: var(--sp-color-ink-800);
  --sp-semantic-border-default: var(--sp-color-ink-700);
  --sp-semantic-border-rule: var(--sp-color-paper-200);
  --sp-semantic-border-inverse: var(--sp-color-ink-950);
  --sp-semantic-accent-default: var(--sp-color-pencil-400);
  --sp-semantic-accent-hover: var(--sp-color-pencil-300);
  --sp-semantic-accent-active: var(--sp-color-pencil-200);
  --sp-semantic-accent-subtle: var(--sp-color-pencil-950);
  --sp-semantic-accent-subtle-border: var(--sp-color-pencil-800);
  --sp-semantic-accent-fg-on: var(--sp-color-ink-950);
  --sp-semantic-focus-ring: var(--sp-color-paper-100);
  --sp-semantic-focus-ring-offset: var(--sp-color-ink-950);
  --sp-semantic-success-fg: var(--sp-color-green-300);
  --sp-semantic-success-bg: var(--sp-color-green-950);
  --sp-semantic-success-border: var(--sp-color-green-800);
  --sp-semantic-success-solid: var(--sp-color-green-500);
  --sp-semantic-warning-fg: var(--sp-color-yellow-300);
  --sp-semantic-warning-bg: var(--sp-color-yellow-950);
  --sp-semantic-warning-border: var(--sp-color-yellow-800);
  --sp-semantic-warning-solid: var(--sp-color-yellow-500);
  --sp-semantic-danger-fg: var(--sp-color-magenta-300);
  --sp-semantic-danger-bg: var(--sp-color-magenta-950);
  --sp-semantic-danger-border: var(--sp-color-magenta-800);
  --sp-semantic-danger-solid: var(--sp-color-magenta-400);
  --sp-semantic-danger-fg-on: var(--sp-color-ink-950);
  --sp-semantic-info-fg: var(--sp-color-cyan-300);
  --sp-semantic-info-bg: var(--sp-color-cyan-950);
  --sp-semantic-info-border: var(--sp-color-cyan-800);
  --sp-semantic-info-solid: var(--sp-color-cyan-500);

  /* status */
  --sp-status-pitch-fg: var(--sp-color-ink-400);
  --sp-status-pitch-bg: var(--sp-color-ink-900);
  --sp-status-pitch-border: var(--sp-color-ink-700);
  --sp-status-assigned-fg: var(--sp-color-blue-300);
  --sp-status-assigned-bg: var(--sp-color-blue-950);
  --sp-status-assigned-border: var(--sp-color-blue-800);
  --sp-status-assigned-solid: var(--sp-color-blue-400);
  --sp-status-reporting-fg: var(--sp-color-teal-300);
  --sp-status-reporting-bg: var(--sp-color-teal-950);
  --sp-status-reporting-border: var(--sp-color-teal-800);
  --sp-status-reporting-solid: var(--sp-color-teal-400);
  --sp-status-editing-fg: var(--sp-color-pencil-300);
  --sp-status-editing-bg: var(--sp-color-pencil-950);
  --sp-status-editing-border: var(--sp-color-pencil-800);
  --sp-status-editing-solid: var(--sp-color-pencil-400);
  --sp-status-copy-desk-fg: var(--sp-color-yellow-300);
  --sp-status-copy-desk-bg: var(--sp-color-yellow-950);
  --sp-status-copy-desk-border: var(--sp-color-yellow-800);
  --sp-status-copy-desk-solid: var(--sp-color-yellow-400);
  --sp-status-ready-fg: var(--sp-color-green-300);
  --sp-status-ready-bg: var(--sp-color-green-950);
  --sp-status-ready-border: var(--sp-color-green-800);
  --sp-status-ready-solid: var(--sp-color-green-400);
  --sp-status-published-fg: var(--sp-color-ink-950);
  --sp-status-published-bg: var(--sp-color-paper-100);
  --sp-status-published-border: var(--sp-color-paper-100);
  --sp-status-published-solid: var(--sp-color-paper-100);
  --sp-status-killed-fg: var(--sp-color-ink-400);
  --sp-status-killed-bg: var(--sp-color-ink-950);
  --sp-status-killed-border: var(--sp-color-ink-700);

  /* channel */
  --sp-channel-print-fg: var(--sp-color-paper-100);
  --sp-channel-print-bg: var(--sp-color-ink-800);
  --sp-channel-print-border: var(--sp-color-ink-500);
  --sp-channel-print-solid: var(--sp-color-paper-200);
  --sp-channel-digital-fg: var(--sp-color-cyan-300);
  --sp-channel-digital-bg: var(--sp-color-cyan-950);
  --sp-channel-digital-border: var(--sp-color-cyan-700);
  --sp-channel-digital-solid: var(--sp-color-cyan-400);
  --sp-channel-digital-web-solid: var(--sp-color-cyan-400);
  --sp-channel-digital-web-fg: var(--sp-color-cyan-300);
  --sp-channel-digital-web-bg: var(--sp-color-cyan-950);
  --sp-channel-digital-app-solid: var(--sp-color-blue-400);
  --sp-channel-digital-app-fg: var(--sp-color-blue-300);
  --sp-channel-digital-app-bg: var(--sp-color-blue-950);
  --sp-channel-digital-social-solid: var(--sp-color-magenta-400);
  --sp-channel-digital-social-fg: var(--sp-color-magenta-300);
  --sp-channel-digital-social-bg: var(--sp-color-magenta-950);
  --sp-channel-digital-newsletter-solid: var(--sp-color-yellow-400);
  --sp-channel-digital-newsletter-fg: var(--sp-color-yellow-300);
  --sp-channel-digital-newsletter-bg: var(--sp-color-yellow-950);

  /* revision */
  --sp-revision-insert-fg: var(--sp-color-pencil-300);
  --sp-revision-insert-line: var(--sp-color-pencil-400);
  --sp-revision-insert-bg-hover: var(--sp-color-pencil-950);
  --sp-revision-delete-fg: var(--sp-color-ink-400);
  --sp-revision-delete-line: var(--sp-color-pencil-400);
  --sp-revision-delete-bg-hover: var(--sp-color-pencil-950);
  --sp-revision-comment-bg: var(--sp-color-yellow-900);
  --sp-revision-comment-bg-active: var(--sp-color-yellow-800);
  --sp-revision-comment-rule: var(--sp-color-yellow-400);

  /* agent */
  --sp-agent-fg: var(--sp-color-nonrepro-300);
  --sp-agent-bg: var(--sp-color-nonrepro-950);
  --sp-agent-bg-hover: var(--sp-color-nonrepro-900);
  --sp-agent-border: var(--sp-color-nonrepro-800);
  --sp-agent-solid: var(--sp-color-nonrepro-400);
  --sp-agent-fg-on: var(--sp-color-ink-950);
  --sp-agent-mark-insert-line: var(--sp-color-nonrepro-400);
  --sp-agent-mark-delete-line: var(--sp-color-nonrepro-400);
  --sp-agent-mark-bg-focus: var(--sp-color-nonrepro-950);
  --sp-agent-state-suggested-fg: var(--sp-color-nonrepro-300);
  --sp-agent-state-suggested-bg: var(--sp-color-nonrepro-950);
  --sp-agent-state-suggested-border: var(--sp-color-nonrepro-800);
  --sp-agent-confidence-filled: var(--sp-color-nonrepro-400);
  --sp-agent-confidence-empty: var(--sp-color-nonrepro-800);
  --sp-agent-provenance-citation-fg: var(--sp-color-nonrepro-300);
  --sp-agent-provenance-quote-rail: var(--sp-color-nonrepro-400);
  --sp-agent-card-rail: var(--sp-color-nonrepro-400);
  --sp-agent-card-border: var(--sp-color-nonrepro-800);
}

/* Follow the OS when no theme is set explicitly. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { color-scheme: dark; }
  :root:not([data-theme="light"]) {

    /* semantic */
    --sp-semantic-surface-canvas: var(--sp-color-ink-950);
    --sp-semantic-surface-raised: var(--sp-color-ink-900);
    --sp-semantic-surface-sunken: var(--sp-color-ink-1000);
    --sp-semantic-surface-hover: var(--sp-color-ink-800);
    --sp-semantic-surface-active: var(--sp-color-ink-700);
    --sp-semantic-surface-selected: var(--sp-color-pencil-950);
    --sp-semantic-surface-inverse: var(--sp-color-paper-100);
    --sp-semantic-surface-inverse-hover: var(--sp-color-paper-200);
    --sp-semantic-surface-inverse-active: var(--sp-color-paper-300);
    --sp-semantic-surface-overlay: #0F0E0DB2;
    --sp-semantic-text-primary: var(--sp-color-paper-100);
    --sp-semantic-text-secondary: var(--sp-color-paper-300);
    --sp-semantic-text-muted: var(--sp-color-ink-400);
    --sp-semantic-text-disabled: var(--sp-color-ink-600);
    --sp-semantic-text-inverse: var(--sp-color-ink-950);
    --sp-semantic-text-accent: var(--sp-color-pencil-400);
    --sp-semantic-text-link: var(--sp-color-paper-100);
    --sp-semantic-border-subtle: var(--sp-color-ink-800);
    --sp-semantic-border-default: var(--sp-color-ink-700);
    --sp-semantic-border-rule: var(--sp-color-paper-200);
    --sp-semantic-border-inverse: var(--sp-color-ink-950);
    --sp-semantic-accent-default: var(--sp-color-pencil-400);
    --sp-semantic-accent-hover: var(--sp-color-pencil-300);
    --sp-semantic-accent-active: var(--sp-color-pencil-200);
    --sp-semantic-accent-subtle: var(--sp-color-pencil-950);
    --sp-semantic-accent-subtle-border: var(--sp-color-pencil-800);
    --sp-semantic-accent-fg-on: var(--sp-color-ink-950);
    --sp-semantic-focus-ring: var(--sp-color-paper-100);
    --sp-semantic-focus-ring-offset: var(--sp-color-ink-950);
    --sp-semantic-success-fg: var(--sp-color-green-300);
    --sp-semantic-success-bg: var(--sp-color-green-950);
    --sp-semantic-success-border: var(--sp-color-green-800);
    --sp-semantic-success-solid: var(--sp-color-green-500);
    --sp-semantic-warning-fg: var(--sp-color-yellow-300);
    --sp-semantic-warning-bg: var(--sp-color-yellow-950);
    --sp-semantic-warning-border: var(--sp-color-yellow-800);
    --sp-semantic-warning-solid: var(--sp-color-yellow-500);
    --sp-semantic-danger-fg: var(--sp-color-magenta-300);
    --sp-semantic-danger-bg: var(--sp-color-magenta-950);
    --sp-semantic-danger-border: var(--sp-color-magenta-800);
    --sp-semantic-danger-solid: var(--sp-color-magenta-400);
    --sp-semantic-danger-fg-on: var(--sp-color-ink-950);
    --sp-semantic-info-fg: var(--sp-color-cyan-300);
    --sp-semantic-info-bg: var(--sp-color-cyan-950);
    --sp-semantic-info-border: var(--sp-color-cyan-800);
    --sp-semantic-info-solid: var(--sp-color-cyan-500);

    /* status */
    --sp-status-pitch-fg: var(--sp-color-ink-400);
    --sp-status-pitch-bg: var(--sp-color-ink-900);
    --sp-status-pitch-border: var(--sp-color-ink-700);
    --sp-status-assigned-fg: var(--sp-color-blue-300);
    --sp-status-assigned-bg: var(--sp-color-blue-950);
    --sp-status-assigned-border: var(--sp-color-blue-800);
    --sp-status-assigned-solid: var(--sp-color-blue-400);
    --sp-status-reporting-fg: var(--sp-color-teal-300);
    --sp-status-reporting-bg: var(--sp-color-teal-950);
    --sp-status-reporting-border: var(--sp-color-teal-800);
    --sp-status-reporting-solid: var(--sp-color-teal-400);
    --sp-status-editing-fg: var(--sp-color-pencil-300);
    --sp-status-editing-bg: var(--sp-color-pencil-950);
    --sp-status-editing-border: var(--sp-color-pencil-800);
    --sp-status-editing-solid: var(--sp-color-pencil-400);
    --sp-status-copy-desk-fg: var(--sp-color-yellow-300);
    --sp-status-copy-desk-bg: var(--sp-color-yellow-950);
    --sp-status-copy-desk-border: var(--sp-color-yellow-800);
    --sp-status-copy-desk-solid: var(--sp-color-yellow-400);
    --sp-status-ready-fg: var(--sp-color-green-300);
    --sp-status-ready-bg: var(--sp-color-green-950);
    --sp-status-ready-border: var(--sp-color-green-800);
    --sp-status-ready-solid: var(--sp-color-green-400);
    --sp-status-published-fg: var(--sp-color-ink-950);
    --sp-status-published-bg: var(--sp-color-paper-100);
    --sp-status-published-border: var(--sp-color-paper-100);
    --sp-status-published-solid: var(--sp-color-paper-100);
    --sp-status-killed-fg: var(--sp-color-ink-400);
    --sp-status-killed-bg: var(--sp-color-ink-950);
    --sp-status-killed-border: var(--sp-color-ink-700);

    /* channel */
    --sp-channel-print-fg: var(--sp-color-paper-100);
    --sp-channel-print-bg: var(--sp-color-ink-800);
    --sp-channel-print-border: var(--sp-color-ink-500);
    --sp-channel-print-solid: var(--sp-color-paper-200);
    --sp-channel-digital-fg: var(--sp-color-cyan-300);
    --sp-channel-digital-bg: var(--sp-color-cyan-950);
    --sp-channel-digital-border: var(--sp-color-cyan-700);
    --sp-channel-digital-solid: var(--sp-color-cyan-400);
    --sp-channel-digital-web-solid: var(--sp-color-cyan-400);
    --sp-channel-digital-web-fg: var(--sp-color-cyan-300);
    --sp-channel-digital-web-bg: var(--sp-color-cyan-950);
    --sp-channel-digital-app-solid: var(--sp-color-blue-400);
    --sp-channel-digital-app-fg: var(--sp-color-blue-300);
    --sp-channel-digital-app-bg: var(--sp-color-blue-950);
    --sp-channel-digital-social-solid: var(--sp-color-magenta-400);
    --sp-channel-digital-social-fg: var(--sp-color-magenta-300);
    --sp-channel-digital-social-bg: var(--sp-color-magenta-950);
    --sp-channel-digital-newsletter-solid: var(--sp-color-yellow-400);
    --sp-channel-digital-newsletter-fg: var(--sp-color-yellow-300);
    --sp-channel-digital-newsletter-bg: var(--sp-color-yellow-950);

    /* revision */
    --sp-revision-insert-fg: var(--sp-color-pencil-300);
    --sp-revision-insert-line: var(--sp-color-pencil-400);
    --sp-revision-insert-bg-hover: var(--sp-color-pencil-950);
    --sp-revision-delete-fg: var(--sp-color-ink-400);
    --sp-revision-delete-line: var(--sp-color-pencil-400);
    --sp-revision-delete-bg-hover: var(--sp-color-pencil-950);
    --sp-revision-comment-bg: var(--sp-color-yellow-900);
    --sp-revision-comment-bg-active: var(--sp-color-yellow-800);
    --sp-revision-comment-rule: var(--sp-color-yellow-400);

    /* agent */
    --sp-agent-fg: var(--sp-color-nonrepro-300);
    --sp-agent-bg: var(--sp-color-nonrepro-950);
    --sp-agent-bg-hover: var(--sp-color-nonrepro-900);
    --sp-agent-border: var(--sp-color-nonrepro-800);
    --sp-agent-solid: var(--sp-color-nonrepro-400);
    --sp-agent-fg-on: var(--sp-color-ink-950);
    --sp-agent-mark-insert-line: var(--sp-color-nonrepro-400);
    --sp-agent-mark-delete-line: var(--sp-color-nonrepro-400);
    --sp-agent-mark-bg-focus: var(--sp-color-nonrepro-950);
    --sp-agent-state-suggested-fg: var(--sp-color-nonrepro-300);
    --sp-agent-state-suggested-bg: var(--sp-color-nonrepro-950);
    --sp-agent-state-suggested-border: var(--sp-color-nonrepro-800);
    --sp-agent-confidence-filled: var(--sp-color-nonrepro-400);
    --sp-agent-confidence-empty: var(--sp-color-nonrepro-800);
    --sp-agent-provenance-citation-fg: var(--sp-color-nonrepro-300);
    --sp-agent-provenance-quote-rail: var(--sp-color-nonrepro-400);
    --sp-agent-card-rail: var(--sp-color-nonrepro-400);
    --sp-agent-card-border: var(--sp-color-nonrepro-800);
  }
}

/* --------------------------------------------------------------------------
   Base application styles that the tokens assume.
   -------------------------------------------------------------------------- */
:root {
  color-scheme: light;
  font-family: var(--sp-font-family-ui);
  font-size: var(--sp-font-size-md);
  line-height: var(--sp-font-lineHeight-normal);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
[data-theme="dark"] { color-scheme: dark; }
body { background: var(--sp-semantic-surface-canvas); color: var(--sp-semantic-text-primary); margin: 0; }
:focus-visible {
  outline: var(--sp-borderWidth-rule) solid var(--sp-semantic-focus-ring);
  outline-offset: 2px;
}
::selection { background: var(--sp-semantic-accent-subtle); color: var(--sp-semantic-text-primary); }