/* Theme CSS custom properties lifted from the mirror's inline <style>.
   This block IS the design system - colours, type scale, spacing. */
:root,
    
    
    
    .color-scheme-1 {
        --color-background: rgb(255 255 255 / 1.0);
        /* RGB values only to apply different opacities - Relative color values are not supported in iOS < 16.4 */
        --color-background-rgb: 255 255 255;
        --opacity-5-15: 0.05;
        --opacity-10-25: 0.1;
        --opacity-35-55: 0.35;
        --opacity-40-60: 0.4;
        --opacity-30-60: 0.3;
        --color-foreground: rgb(4 17 22 / 1.0);
        --color-foreground-rgb: 4 17 22;
        --color-foreground-heading: rgb(0 0 0 / 1.0);
        --color-foreground-heading-rgb: 0 0 0;
        --color-primary: rgb(16 69 86 / 1.0);
        --color-primary-rgb: 16 69 86;
        --color-primary-hover: rgb(4 17 22 / 1.0);
        --color-primary-hover-rgb: 4 17 22;
        --color-border: rgb(238 244 246 / 1.0);
        --color-border-rgb: 238 244 246;
        --color-shadow: rgb(0 0 0 / 1.0);
        --color-shadow-rgb: 0 0 0;
        --color-primary-button-text: rgb(238 244 246 / 1.0);
        --color-primary-button-background: rgb(0 0 0 / 1.0);
        --color-primary-button-border: rgb(0 0 0 / 1.0);
        --color-primary-button-hover-text: rgb(238 244 246 / 1.0);
        --color-primary-button-hover-background: rgb(26 26 26 / 1.0);
        --color-primary-button-hover-border: rgb(26 26 26 / 1.0);
        --color-secondary-button-text: rgb(4 17 22 / 1.0);
        --color-secondary-button-background: rgb(0 0 0 / 0.0);
        --color-secondary-button-border: rgb(4 17 22 / 1.0);
        --color-secondary-button-hover-text: rgb(4 17 22 / 1.0);
        --color-secondary-button-hover-background: rgb(255 255 255 / 1.0);
        --color-secondary-button-hover-border: rgb(255 255 255 / 1.0);
        --color-input-background: rgb(255 255 255 / 1.0);
        --color-input-text: rgb(0 0 0 / 1.0);
        --color-input-text-rgb: 0 0 0;
        --color-input-border: rgb(16 69 86 / 1.0);
        --color-input-hover-background: rgb(245 245 245 / 1.0);
        --color-variant-background: rgb(255 255 255 / 1.0);
        --color-variant-border: rgb(230 230 230 / 1.0);
        --color-variant-text: rgb(0 0 0 / 1.0);
        --color-variant-text-rgb: 0 0 0;
        --color-variant-hover-background: rgb(245 245 245 / 1.0);
        --color-variant-hover-text: rgb(0 0 0 / 1.0);
        --color-variant-hover-border: rgb(230 230 230 / 1.0);
        --color-selected-variant-background: rgb(0 0 0 / 1.0);
        --color-selected-variant-border: rgb(0 0 0 / 1.0);
        --color-selected-variant-text: rgb(255 255 255 / 1.0);
        --color-selected-variant-hover-background: rgb(26 26 26 / 1.0);
        --color-selected-variant-hover-text: rgb(255 255 255 / 1.0);
        --color-selected-variant-hover-border: rgb(26 26 26 / 1.0);

        --input-disabled-background-color: rgb(var(--color-foreground-rgb) / var(--opacity-10));
        --input-disabled-border-color: rgb(var(--color-foreground-rgb) / var(--opacity-5-15));
        --input-disabled-text-color: rgb(var(--color-foreground-rgb) / var(--opacity-50));
        --color-foreground-muted: rgb(var(--color-foreground-rgb) / var(--opacity-60));
        --font-h1--color: var(--color-foreground-heading);
        --font-h2--color: var(--color-foreground-heading);
        --font-h3--color: var(--color-foreground-heading);
        --font-h4--color: var(--color-foreground-heading);
        --font-h5--color: var(--color-foreground-heading);
        --font-h6--color: var(--color-foreground-heading);

        /* Shadows */
        
        
          --shadow-blur: 20px;
          --shadow-popover: 0px 4px 20px rgb(var(--color-shadow-rgb) / var(--opacity-15));
        
      }
  
    
    
    
    .color-scheme-2 {
        --color-background: rgb(18 18 18 / 1.0);
        /* RGB values only to apply different opacities - Relative color values are not supported in iOS < 16.4 */
        --color-background-rgb: 18 18 18;
        --opacity-5-15: 0.15;
        --opacity-10-25: 0.25;
        --opacity-35-55: 0.55;
        --opacity-40-60: 0.6;
        --opacity-30-60: 0.6;
        --color-foreground: rgb(238 244 246 / 1.0);
        --color-foreground-rgb: 238 244 246;
        --color-foreground-heading: rgb(255 255 255 / 1.0);
        --color-foreground-heading-rgb: 255 255 255;
        --color-primary: rgb(205 223 229 / 1.0);
        --color-primary-rgb: 205 223 229;
        --color-primary-hover: rgb(238 244 246 / 1.0);
        --color-primary-hover-rgb: 238 244 246;
        --color-border: rgb(4 17 22 / 1.0);
        --color-border-rgb: 4 17 22;
        --color-shadow: rgb(0 0 0 / 1.0);
        --color-shadow-rgb: 0 0 0;
        --color-primary-button-text: rgb(4 17 22 / 1.0);
        --color-primary-button-background: rgb(205 223 229 / 1.0);
        --color-primary-button-border: rgb(205 223 229 / 1.0);
        --color-primary-button-hover-text: rgb(4 17 22 / 1.0);
        --color-primary-button-hover-background: rgb(173 216 230 / 1.0);
        --color-primary-button-hover-border: rgb(173 216 230 / 1.0);
        --color-secondary-button-text: rgb(238 244 246 / 1.0);
        --color-secondary-button-background: rgb(0 0 0 / 0.0);
        --color-secondary-button-border: rgb(238 244 246 / 1.0);
        --color-secondary-button-hover-text: rgb(238 244 246 / 1.0);
        --color-secondary-button-hover-background: rgb(4 17 22 / 1.0);
        --color-secondary-button-hover-border: rgb(4 17 22 / 1.0);
        --color-input-background: rgb(51 51 51 / 1.0);
        --color-input-text: rgb(255 255 255 / 1.0);
        --color-input-text-rgb: 255 255 255;
        --color-input-border: rgb(205 223 229 / 1.0);
        --color-input-hover-background: rgb(245 245 245 / 1.0);
        --color-variant-background: rgb(255 255 255 / 1.0);
        --color-variant-border: rgb(230 230 230 / 1.0);
        --color-variant-text: rgb(0 0 0 / 1.0);
        --color-variant-text-rgb: 0 0 0;
        --color-variant-hover-background: rgb(245 245 245 / 1.0);
        --color-variant-hover-text: rgb(0 0 0 / 1.0);
        --color-variant-hover-border: rgb(230 230 230 / 1.0);
        --color-selected-variant-background: rgb(0 0 0 / 1.0);
        --color-selected-variant-border: rgb(0 0 0 / 1.0);
        --color-selected-variant-text: rgb(255 255 255 / 1.0);
        --color-selected-variant-hover-background: rgb(26 26 26 / 1.0);
        --color-selected-variant-hover-text: rgb(255 255 255 / 1.0);
        --color-selected-variant-hover-border: rgb(26 26 26 / 1.0);

        --input-disabled-background-color: rgb(var(--color-foreground-rgb) / var(--opacity-10));
        --input-disabled-border-color: rgb(var(--color-foreground-rgb) / var(--opacity-5-15));
        --input-disabled-text-color: rgb(var(--color-foreground-rgb) / var(--opacity-50));
        --color-foreground-muted: rgb(var(--color-foreground-rgb) / var(--opacity-60));
        --font-h1--color: var(--color-foreground-heading);
        --font-h2--color: var(--color-foreground-heading);
        --font-h3--color: var(--color-foreground-heading);
        --font-h4--color: var(--color-foreground-heading);
        --font-h5--color: var(--color-foreground-heading);
        --font-h6--color: var(--color-foreground-heading);

        /* Shadows */
        
        
          --shadow-blur: 20px;
          --shadow-popover: 0px 4px 20px rgb(var(--color-shadow-rgb) / var(--opacity-15));
        
      }
  
    
    
    
    .color-scheme-3 {
        --color-background: rgb(173 216 230 / 1.0);
        /* RGB values only to apply different opacities - Relative color values are not supported in iOS < 16.4 */
        --color-background-rgb: 173 216 230;
        --opacity-5-15: 0.05;
        --opacity-10-25: 0.1;
        --opacity-35-55: 0.35;
        --opacity-40-60: 0.4;
        --opacity-30-60: 0.3;
        --color-foreground: rgb(4 17 22 / 1.0);
        --color-foreground-rgb: 4 17 22;
        --color-foreground-heading: rgb(0 0 0 / 1.0);
        --color-foreground-heading-rgb: 0 0 0;
        --color-primary: rgb(9 11 17 / 1.0);
        --color-primary-rgb: 9 11 17;
        --color-primary-hover: rgb(52 60 86 / 1.0);
        --color-primary-hover-rgb: 52 60 86;
        --color-border: rgb(238 244 246 / 1.0);
        --color-border-rgb: 238 244 246;
        --color-shadow: rgb(0 0 0 / 1.0);
        --color-shadow-rgb: 0 0 0;
        --color-primary-button-text: rgb(240 241 244 / 1.0);
        --color-primary-button-background: rgb(0 0 0 / 1.0);
        --color-primary-button-border: rgb(0 0 0 / 1.0);
        --color-primary-button-hover-text: rgb(255 255 255 / 1.0);
        --color-primary-button-hover-background: rgb(26 26 26 / 1.0);
        --color-primary-button-hover-border: rgb(26 26 26 / 1.0);
        --color-secondary-button-text: rgb(4 17 22 / 1.0);
        --color-secondary-button-background: rgb(0 0 0 / 0.0);
        --color-secondary-button-border: rgb(4 17 22 / 1.0);
        --color-secondary-button-hover-text: rgb(240 241 244 / 1.0);
        --color-secondary-button-hover-background: rgb(52 60 86 / 1.0);
        --color-secondary-button-hover-border: rgb(52 60 86 / 1.0);
        --color-input-background: rgb(255 255 255 / 1.0);
        --color-input-text: rgb(9 11 17 / 1.0);
        --color-input-text-rgb: 9 11 17;
        --color-input-border: rgb(9 11 17 / 1.0);
        --color-input-hover-background: rgb(245 245 245 / 1.0);
        --color-variant-background: rgb(255 255 255 / 1.0);
        --color-variant-border: rgb(230 230 230 / 1.0);
        --color-variant-text: rgb(0 0 0 / 1.0);
        --color-variant-text-rgb: 0 0 0;
        --color-variant-hover-background: rgb(245 245 245 / 1.0);
        --color-variant-hover-text: rgb(0 0 0 / 1.0);
        --color-variant-hover-border: rgb(230 230 230 / 1.0);
        --color-selected-variant-background: rgb(0 0 0 / 1.0);
        --color-selected-variant-border: rgb(0 0 0 / 1.0);
        --color-selected-variant-text: rgb(255 255 255 / 1.0);
        --color-selected-variant-hover-background: rgb(26 26 26 / 1.0);
        --color-selected-variant-hover-text: rgb(255 255 255 / 1.0);
        --color-selected-variant-hover-border: rgb(26 26 26 / 1.0);

        --input-disabled-background-color: rgb(var(--color-foreground-rgb) / var(--opacity-10));
        --input-disabled-border-color: rgb(var(--color-foreground-rgb) / var(--opacity-5-15));
        --input-disabled-text-color: rgb(var(--color-foreground-rgb) / var(--opacity-50));
        --color-foreground-muted: rgb(var(--color-foreground-rgb) / var(--opacity-60));
        --font-h1--color: var(--color-foreground-heading);
        --font-h2--color: var(--color-foreground-heading);
        --font-h3--color: var(--color-foreground-heading);
        --font-h4--color: var(--color-foreground-heading);
        --font-h5--color: var(--color-foreground-heading);
        --font-h6--color: var(--color-foreground-heading);

        /* Shadows */
        
        
          --shadow-blur: 20px;
          --shadow-popover: 0px 4px 20px rgb(var(--color-shadow-rgb) / var(--opacity-15));
        
      }
  
    
    
    
    .color-scheme-4 {
        --color-background: rgb(52 60 86 / 1.0);
        /* RGB values only to apply different opacities - Relative color values are not supported in iOS < 16.4 */
        --color-background-rgb: 52 60 86;
        --opacity-5-15: 0.15;
        --opacity-10-25: 0.25;
        --opacity-35-55: 0.55;
        --opacity-40-60: 0.6;
        --opacity-30-60: 0.6;
        --color-foreground: rgb(238 244 246 / 1.0);
        --color-foreground-rgb: 238 244 246;
        --color-foreground-heading: rgb(255 255 255 / 1.0);
        --color-foreground-heading-rgb: 255 255 255;
        --color-primary: rgb(238 244 246 / 1.0);
        --color-primary-rgb: 238 244 246;
        --color-primary-hover: rgb(240 241 244 / 1.0);
        --color-primary-hover-rgb: 240 241 244;
        --color-border: rgb(67 77 112 / 1.0);
        --color-border-rgb: 67 77 112;
        --color-shadow: rgb(0 0 0 / 1.0);
        --color-shadow-rgb: 0 0 0;
        --color-primary-button-text: rgb(4 17 22 / 1.0);
        --color-primary-button-background: rgb(173 216 230 / 1.0);
        --color-primary-button-border: rgb(173 216 230 / 1.0);
        --color-primary-button-hover-text: rgb(0 0 0 / 1.0);
        --color-primary-button-hover-background: rgb(211 214 222 / 1.0);
        --color-primary-button-hover-border: rgb(211 214 222 / 1.0);
        --color-secondary-button-text: rgb(240 241 244 / 1.0);
        --color-secondary-button-background: rgb(0 0 0 / 0.0);
        --color-secondary-button-border: rgb(240 241 244 / 1.0);
        --color-secondary-button-hover-text: rgb(238 244 246 / 1.0);
        --color-secondary-button-hover-background: rgb(9 11 17 / 1.0);
        --color-secondary-button-hover-border: rgb(9 11 17 / 1.0);
        --color-input-background: rgb(240 241 244 / 1.0);
        --color-input-text: rgb(0 0 0 / 1.0);
        --color-input-text-rgb: 0 0 0;
        --color-input-border: rgb(0 0 0 / 1.0);
        --color-input-hover-background: rgb(245 245 245 / 1.0);
        --color-variant-background: rgb(255 255 255 / 1.0);
        --color-variant-border: rgb(230 230 230 / 1.0);
        --color-variant-text: rgb(0 0 0 / 1.0);
        --color-variant-text-rgb: 0 0 0;
        --color-variant-hover-background: rgb(245 245 245 / 1.0);
        --color-variant-hover-text: rgb(0 0 0 / 1.0);
        --color-variant-hover-border: rgb(230 230 230 / 1.0);
        --color-selected-variant-background: rgb(0 0 0 / 1.0);
        --color-selected-variant-border: rgb(0 0 0 / 1.0);
        --color-selected-variant-text: rgb(255 255 255 / 1.0);
        --color-selected-variant-hover-background: rgb(26 26 26 / 1.0);
        --color-selected-variant-hover-text: rgb(255 255 255 / 1.0);
        --color-selected-variant-hover-border: rgb(26 26 26 / 1.0);

        --input-disabled-background-color: rgb(var(--color-foreground-rgb) / var(--opacity-10));
        --input-disabled-border-color: rgb(var(--color-foreground-rgb) / var(--opacity-5-15));
        --input-disabled-text-color: rgb(var(--color-foreground-rgb) / var(--opacity-50));
        --color-foreground-muted: rgb(var(--color-foreground-rgb) / var(--opacity-60));
        --font-h1--color: var(--color-foreground-heading);
        --font-h2--color: var(--color-foreground-heading);
        --font-h3--color: var(--color-foreground-heading);
        --font-h4--color: var(--color-foreground-heading);
        --font-h5--color: var(--color-foreground-heading);
        --font-h6--color: var(--color-foreground-heading);

        /* Shadows */
        
        
          --shadow-blur: 20px;
          --shadow-popover: 0px 4px 20px rgb(var(--color-shadow-rgb) / var(--opacity-15));
        
      }
  

  body, .color-scheme-1, .color-scheme-2, .color-scheme-3, .color-scheme-4 {
    color: var(--color-foreground);
    background-color: var(--color-background);
  }