:root {
  --Secondary-Secondary-Container: #E5FF4B;
  --Secondary-On-Secondary-Container: #101111;
  
  --Surface-Surface-Container-Dark: #2F3131;
  --Surface-On-Surface-Dark: #FAF9F9;
  
  --Surface-Surface-Container-Light: #EDEDED;
  --Surface-On-Surface-Light: #101111;

  --Surface-Surface-Container-High-Dark: #3B3B3C;
  --Surface-Surface-Container-High-Light: #E9E8E8;

  --Surface-Surface-Container-Lowest-Dark: #070808;
  --Surface-Surface-Container-Lowest-Light: #F5F5F5;

  --Surface-Surface-Container-Low-Dark: #1A1C1C;
  --Surface-Surface-Container-Low-Light: #F1F1F1;

  --Corner-Large: 16px;

  --Surface-On-Surface-Variant-Dark: #ABABAB;
  --Surface-On-Surface-Variant-Light: #3B3B3C;
  
  --Others-Outline-Variant-Dark: #777;
  --Others-Outline-Variant-Light: #ABABAB;
  
  --Others-Outline-Dark: #525253;
  --Others-Outline-Light: #C7C6C6;
  
  --Static-Title-Large-Font: "Suisse Intl", "Inter", "Helvetica", "Arial", sans-serif;
  --Static-Title-Large-Size: 22px;
  --Static-Title-Large-Weight: 500;
  --Static-Title-Large-Line-Height: 28px;
  --Static-Title-Large-Tracking: 0;

  --Static-Label-Large-Font: "Suisse Intl", "Inter", "Helvetica", "Arial", sans-serif;
  --Static-Label-Large-Size: 14px;
  --Static-Label-Large-Line-Height: 20px;
  --Static-Label-Large-Tracking: 0.1px;

  --Static-Label-Medium-Font: "Suisse Intl", "Inter", "Helvetica", "Arial", sans-serif;
  --Static-Label-Medium-Size: 12px;
  --Static-Label-Medium-Weight: 500;
  --Static-Label-Medium-Line-Height: 16px;
  --Static-Label-Medium-Tracking: 0.5px;

  --Static-Label-Small-Font: "Suisse Intl", "Inter", "Helvetica", "Arial", sans-serif;
  --Static-Label-Small-Size: 11px;
  --Static-Label-Small-Weight: 500;
  --Static-Label-Small-Line-Height: 16px;
  --Static-Label-Small-Tracking: 0.5px;

  --Static-Body-Small-Font: "Suisse Intl", "Inter", "Helvetica", "Arial", sans-serif;
  --Static-Body-Small-Size: 12px;
  --Static-Body-Small-Line-Height: 16px;
  --Static-Body-Small-Tracking: 0.4px;

  --Static-Body-Large-Font: "Suisse Intl", "Inter", "Helvetica", "Arial", sans-serif;
  --Static-Body-Large-Size: 16px;
  --Static-Body-Large-Weight: 400;
  --Static-Body-Large-Line-Height: 24px;
  --Static-Body-Large-Tracking: 0.5px;
  
  --Static-Body-Medium-Font: "Suisse Intl", "Inter", "Helvetica", "Arial", sans-serif;
  --Static-Body-Medium-Size: 16px;
  --Static-Body-Medium-Weight: 400;
  --Static-Body-Medium-Line-Height: 20px;
  --Static-Body-Medium-Tracking: 0.25px;
  
  --Static-Headline-Small-Font: "Suisse Intl", "Inter", "Helvetica", "Arial", sans-serif;
  --Static-Headline-Small-Size: 24px;
  --Static-Headline-Small-Weight: 400;
  --Static-Headline-Small-Line-Height: 32px;
  --Static-Headline-Small-Tracking: 0;
  
  --Primary-Primary-Dark: #DEDDDD;
  --Primary-Primary-Light: #101111;
  --Primary-On-Primary-Dark: #101111;
  --Primary-On-Primary-Light: #FDFCFC;
  
  --Grays-Gray: #8E8E93;
  
  --Spacing-Gap-Segments: 2px;
  --Spacing-Gap-Internal: 4px;
  --Spacing-Padding-Horizontal: 12px;
  --Spacing-Padding-Vertical: 6px;
  
  --Radius-Selected: 24px;
  --Radius-Unselected: 4px;
  --Radius-Full: 100px;
  
  --Icon-Size: 20px;
  --Segment-Min-Width: 48px;

  --Motion-Transition-Fast: 150ms;
  --Motion-Click-Fast: 200ms;

  --Component-SearchBar-Height: 40px;
  --Component-SearchBar-Max-Width: 720px;
  --Component-SearchBar-Radius: 28px;
  --Component-SearchBar-Padding: 8px;
  --Component-SearchBar-Gap: 4px;
  --Component-SearchBar-Action-Size: 32px;
  --Component-SearchBar-Icon-Size: 20px;

  --Component-FilterButton-Height: 20px;
  --Component-FilterButton-Padding-Vertical: 10px;
  --Component-FilterButton-Padding-Horizontal: 16px;
  --Component-FilterButton-Radius: 50px;
  --Component-FilterButton-Border-Color-Light: #E1BEE7;
  --Component-FilterButton-Border-Color-Dark: #CE93D8;
  --Component-FilterButton-Border-Color-Hover-Light: #CE93D8;
  --Component-FilterButton-Border-Color-Hover-Dark: #BA68C8;
  --Component-FilterButton-Background-Light: #FFFFFF;
  --Component-FilterButton-Background-Dark: #1E1E1E;
  --Component-FilterButton-Background-Hover-Light: #FFFFFF;
  --Component-FilterButton-Background-Hover-Dark: #2C2C2E;
  --Component-FilterButton-Text-Color-Light: #49454F;
  --Component-FilterButton-Text-Color-Dark: rgba(255, 255, 255, 0.87);
  --Component-FilterButton-Shadow-Normal-Light: 0px 1px 3px rgba(0, 0, 0, 0.1);
  --Component-FilterButton-Shadow-Normal-Dark: 0px 1px 3px rgba(0, 0, 0, 0.3);
  --Component-FilterButton-Shadow-Hover-Light: 0px 2px 4px rgba(0, 0, 0, 0.15);
  --Component-FilterButton-Shadow-Hover-Dark: 0px 2px 4px rgba(0, 0, 0, 0.4);
  --Component-FilterButton-Shadow-Active-Light: 0px 1px 2px rgba(0, 0, 0, 0.1);
  --Component-FilterButton-Shadow-Active-Dark: 0px 1px 2px rgba(0, 0, 0, 0.3);

  --Component-FilterModal-Radius: 28px;
  --Component-FilterModal-Padding: 24px;
  --Component-FilterModal-Padding-Bottom: 20px;
  --Component-FilterModal-Shadow: 0 4px 8px 3px rgba(0, 0, 0, 0.15), 0 1px 3px 0 rgba(0, 0, 0, 0.30);
  --Component-FilterModal-Header-Gap: 16px;
  --Component-FilterModal-Content-Gap: 24px;
  --Component-FilterModal-Content-Margin-Top: 16px;
  --Component-FilterModal-Content-Margin-Bottom: 32px;
  --Component-FilterModal-Footer-Gap: 8px;
  --Component-FilterModal-Button-Height: 48px;
  --Component-FilterModal-Button-Padding: 10px 16px;
  --Component-FilterModal-Expandable-Icon-Size: 40px;

  // VideoTimeline
  --Component-VideoTimeline-Background-Light: #FFFFFF;
  --Component-VideoTimeline-Background-Dark: #1E1E1E;
  --Component-VideoTimeline-Border-Color-Light: rgba(0, 0, 0, 0.16);
  --Component-VideoTimeline-Border-Color-Dark: rgba(255, 255, 255, 0.16);
  --Component-VideoTimeline-Shadow-Light: 0px 4px 5.3px 0px rgba(0, 0, 0, 0.16);
  --Component-VideoTimeline-Shadow-Dark: none;
  --Component-VideoTimeline-Outline-Text-Light: #79747e;
  --Component-VideoTimeline-Outline-Text-Dark: rgba(255, 255, 255, 0.7);
  --Component-VideoTimeline-Tick-Color-Light: rgba(0, 0, 0, 0.45);
  --Component-VideoTimeline-Tick-Color-Dark: rgba(255, 255, 255, 0.5);
  --Component-VideoTimeline-Label-Color-Light: #2c2c2c;
  --Component-VideoTimeline-Label-Color-Dark: rgba(255, 255, 255, 0.85);
  --Component-VideoTimeline-Segment-Color-Light: #4DB6AC;
  --Component-VideoTimeline-Segment-Color-Dark: #4DB6AC;
  --Component-VideoTimeline-Segment-Hover-Light: #26A69A;
  --Component-VideoTimeline-Segment-Hover-Dark: #26A69A;
  --Component-VideoTimeline-Event-Bg-Light: #FFFFFF;
  --Component-VideoTimeline-Event-Bg-Dark: #2F3131;
  --Component-VideoTimeline-Event-Border-Light: rgba(0, 0, 0, 0.2);
  --Component-VideoTimeline-Event-Border-Dark: rgba(255, 255, 255, 0.2);
  --Component-VideoTimeline-Selection-Color-Light: rgba(25, 118, 210, 0.12);
  --Component-VideoTimeline-Selection-Color-Dark: rgba(144, 202, 249, 0.12);
  --Component-VideoTimeline-Playhead-Color-Light: #1a1c1e;
  --Component-VideoTimeline-Playhead-Color-Dark: #e2e2e6;
  --Component-VideoTimeline-IconButton-Border-Light: rgba(0, 0, 0, 0.22);
  --Component-VideoTimeline-IconButton-Border-Dark: rgba(255, 255, 255, 0.22);
  --Component-VideoTimeline-Track-Border-Light: rgba(0, 0, 0, 0.1);
  --Component-VideoTimeline-Track-Border-Dark: rgba(255, 255, 255, 0.1);
  --Component-VideoTimeline-Radius: 12px;
  --Component-VideoTimeline-Header-Button-Height: 32px;
  --Component-VideoTimeline-Header-Button-Radius: 999px;

  // VideoPlayer
  --Component-VideoPlayer-Background-Light: #f0f0f0;
  --Component-VideoPlayer-Background-Dark: #1E1E1E;
  --Component-VideoPlayer-Border-Light: rgba(0, 0, 0, 0.12);
  --Component-VideoPlayer-Border-Dark: transparent;
  --Component-VideoPlayer-Radius: 12px;
  --Component-VideoPlayer-Control-Bg-Light: rgba(0, 0, 0, 0.08);
  --Component-VideoPlayer-Control-Bg-Dark: rgba(255, 255, 255, 0.15);
  --Component-VideoPlayer-Control-Hover-Light: rgba(0, 0, 0, 0.15);
  --Component-VideoPlayer-Control-Hover-Dark: rgba(255, 255, 255, 0.25);
  --Component-VideoPlayer-Control-Color-Light: #1a1c1e;
  --Component-VideoPlayer-Control-Color-Dark: #ffffff;
  --Component-VideoPlayer-Badge-Active-Bg-Light: rgba(0, 0, 0, 0.85);
  --Component-VideoPlayer-Badge-Active-Bg-Dark: rgba(255, 255, 255, 0.9);
  --Component-VideoPlayer-Badge-Active-Color-Light: #ffffff;
  --Component-VideoPlayer-Badge-Active-Color-Dark: #000000;
  --Component-VideoPlayer-Badge-Inactive-Bg-Light: rgba(0, 0, 0, 0.08);
  --Component-VideoPlayer-Badge-Inactive-Bg-Dark: rgba(255, 255, 255, 0.15);
  --Component-VideoPlayer-Badge-Inactive-Color-Light: rgba(0, 0, 0, 0.6);
  --Component-VideoPlayer-Badge-Inactive-Color-Dark: rgba(255, 255, 255, 0.7);
  --Component-VideoPlayer-Slider-Color-Light: #1a1c1e;
  --Component-VideoPlayer-Slider-Color-Dark: #ffffff;
  --Component-VideoPlayer-Slider-Rail-Light: rgba(0, 0, 0, 0.2);
  --Component-VideoPlayer-Slider-Rail-Dark: rgba(255, 255, 255, 0.3);
  --Component-VideoPlayer-Timestamp-Color-Light: #1a1c1e;
  --Component-VideoPlayer-Timestamp-Color-Dark: #ffffff;
  --Component-VideoPlayer-Recording-Bg: #c62828;
  --Component-VideoPlayer-Recording-Color: #ffffff;
}

