@layer quiet {
  /*////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
  //
  //  Light & dark shared properties
  //
  ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
  :root,
  .quiet-light,
  .quiet-dark {
    /*//////////////////////////////////////////////////////////////////////////////////////////////////////////////////
    //
    //  These base tokens are used to seed the color palettes. For best results, always use a midtone color such as any
    //  of the 500-level colors from:
    //
    //  https://color.surf/
    //
    //  For best results, avoid using seed colors in your own stylesheets!
    //
    //////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

    --quiet-primary-seed: #989cff;
    --quiet-neutral-seed: #8b8c93;
    --quiet-constructive-seed: #5dbb55;
    --quiet-destructive-seed: #ef5655;

    /*//////////////////////////////////////////////////////////////////////////////////////////////////////////////////
    //
    //  The following design tokens are shared by both the light and dark theme. Color tokens are specific to light and
    //  dark mode, so they appear later on.
    //
    //////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

    --quiet-content-spacing: 1.75rem;
    --quiet-font-family: system-ui, sans-serif;
    --quiet-font-family-heading: var(--quiet-font-family);
    --quiet-font-family-code: SFMono-Regular, Consolas, Menlo, Monaco, 'liberation mono', 'Courier New', monospace;
    --quiet-font-size: 16px;
    --quiet-font-weight-normal: 400;
    --quiet-font-weight-semibold: 500;
    --quiet-font-weight-bold: 700;
    --quiet-line-height: 1.6;
    --quiet-focus-width: 3px;
    --quiet-focus-offset: 1px;
    --quiet-backdrop-filter: blur(6px);

    /* Border tokens */
    --quiet-border-style: solid;
    --quiet-border-width: 1px;
    --quiet-border-radius-xs: 0.1875rem; /* 3px */
    --quiet-border-radius-sm: 0.25rem; /* 4px */
    --quiet-border-radius-md: 0.375rem; /* 6px */
    --quiet-border-radius-lg: 0.5625rem; /* 9px */
    --quiet-border-radius-xl: 0.75rem; /* 12px */
    --quiet-border-radius-pill: 9999px;
    --quiet-border-radius-circle: 50%;

    /* Form control tokens */
    --quiet-form-control-height-xs: 1.75rem;
    --quiet-form-control-height-sm: 2.25rem;
    --quiet-form-control-height-md: 2.75rem;
    --quiet-form-control-height-lg: 3.25rem;
    --quiet-form-control-height-xl: 3.75rem;
    --quiet-form-control-font-size-xs: 0.75rem;
    --quiet-form-control-font-size-sm: 0.875rem;
    --quiet-form-control-font-size-md: 1rem;
    --quiet-form-control-font-size-lg: 1.25rem;
    --quiet-form-control-font-size-xl: 1.5rem;
    --quiet-form-control-required-content: '*';
    --quiet-form-control-placeholder-color: color-mix(in oklab, var(--quiet-text-muted), transparent 25%);
    --quiet-button-active-offset: 1px;

    /*//////////////////////////////////////////////////////////////////////////////////////////////////////////////////
    //
    //  The color palettes below are generated from the seed colors. The palettes remain static in both light and dark
    //  mode, so 100 is always light and 900 is always dark. If you plan on supporting dark mode, you should avoid using
    //  these primitives and use the color tokens shown in the docs instead.
    //
    //  You probably shouldn't think about changing these but, but if you do venture into such territory, it will
    //  probably be helpful to use the palettes from:
    //
    //  https://color.surf/
    //
    //////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

    --quiet-primary-50: color-mix(in oklab, var(--quiet-primary-seed), white 95%);
    --quiet-primary-100: color-mix(in oklab, var(--quiet-primary-seed), white 87%);
    --quiet-primary-200: color-mix(in oklab, var(--quiet-primary-seed), white 70%);
    --quiet-primary-300: color-mix(in oklab, var(--quiet-primary-seed), white 47%);
    --quiet-primary-400: color-mix(in oklab, var(--quiet-primary-seed), white 23%);
    --quiet-primary-500: var(--quiet-primary-seed);
    --quiet-primary-600: color-mix(in oklab, var(--quiet-primary-seed), black 15.5%);
    --quiet-primary-700: color-mix(in oklab, var(--quiet-primary-seed), black 28.25%);
    --quiet-primary-800: color-mix(in oklab, var(--quiet-primary-seed), black 43.5%);
    --quiet-primary-900: color-mix(in oklab, var(--quiet-primary-seed), black 58.5%);
    --quiet-primary-950: color-mix(in oklab, var(--quiet-primary-seed), black 73.75%);

    --quiet-neutral-50: color-mix(in oklab, var(--quiet-neutral-seed), white 95%);
    --quiet-neutral-100: color-mix(in oklab, var(--quiet-neutral-seed), white 87%);
    --quiet-neutral-200: color-mix(in oklab, var(--quiet-neutral-seed), white 70%);
    --quiet-neutral-300: color-mix(in oklab, var(--quiet-neutral-seed), white 47%);
    --quiet-neutral-400: color-mix(in oklab, var(--quiet-neutral-seed), white 23%);
    --quiet-neutral-500: var(--quiet-neutral-seed);
    --quiet-neutral-600: color-mix(in oklab, var(--quiet-neutral-seed), black 15.5%);
    --quiet-neutral-700: color-mix(in oklab, var(--quiet-neutral-seed), black 28.25%);
    --quiet-neutral-800: color-mix(in oklab, var(--quiet-neutral-seed), black 43.5%);
    --quiet-neutral-900: color-mix(in oklab, var(--quiet-neutral-seed), black 58.5%);
    --quiet-neutral-950: color-mix(in oklab, var(--quiet-neutral-seed), black 73.75%);

    --quiet-constructive-50: color-mix(in oklab, var(--quiet-constructive-seed), white 95%);
    --quiet-constructive-100: color-mix(in oklab, var(--quiet-constructive-seed), white 87%);
    --quiet-constructive-200: color-mix(in oklab, var(--quiet-constructive-seed), white 70%);
    --quiet-constructive-300: color-mix(in oklab, var(--quiet-constructive-seed), white 47%);
    --quiet-constructive-400: color-mix(in oklab, var(--quiet-constructive-seed), white 23%);
    --quiet-constructive-500: var(--quiet-constructive-seed);
    --quiet-constructive-600: color-mix(in oklab, var(--quiet-constructive-seed), black 15.5%);
    --quiet-constructive-700: color-mix(in oklab, var(--quiet-constructive-seed), black 28.25%);
    --quiet-constructive-800: color-mix(in oklab, var(--quiet-constructive-seed), black 43.5%);
    --quiet-constructive-900: color-mix(in oklab, var(--quiet-constructive-seed), black 58.5%);
    --quiet-constructive-950: color-mix(in oklab, var(--quiet-constructive-seed), black 73.75%);

    --quiet-destructive-50: color-mix(in oklab, var(--quiet-destructive-seed), white 95%);
    --quiet-destructive-100: color-mix(in oklab, var(--quiet-destructive-seed), white 87%);
    --quiet-destructive-200: color-mix(in oklab, var(--quiet-destructive-seed), white 70%);
    --quiet-destructive-300: color-mix(in oklab, var(--quiet-destructive-seed), white 47%);
    --quiet-destructive-400: color-mix(in oklab, var(--quiet-destructive-seed), white 23%);
    --quiet-destructive-500: var(--quiet-destructive-seed);
    --quiet-destructive-600: color-mix(in oklab, var(--quiet-destructive-seed), black 15.5%);
    --quiet-destructive-700: color-mix(in oklab, var(--quiet-destructive-seed), black 28.25%);
    --quiet-destructive-800: color-mix(in oklab, var(--quiet-destructive-seed), black 43.5%);
    --quiet-destructive-900: color-mix(in oklab, var(--quiet-destructive-seed), black 58.5%);
    --quiet-destructive-950: color-mix(in oklab, var(--quiet-destructive-seed), black 73.75%);
  }

  /*////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
  //
  //  Light theme colors
  //
  ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

  :root,
  .quiet-light {
    color-scheme: light;

    --quiet-silent: white;
    --quiet-strident: black;
    --quiet-background-color: white;
    --quiet-paper-color: white;
    --quiet-text-body: var(--quiet-neutral-900);
    --quiet-text-muted: var(--quiet-neutral-600);
    --quiet-focus-color: var(--quiet-primary-fill-mid);
    --quiet-focus-ring: var(--quiet-border-style) var(--quiet-focus-width) var(--quiet-focus-color);
    --quiet-backdrop-color: rgb(0 0 0 / 0.25);
    --quiet-selection-background-color: var(--quiet-primary-300);
    --quiet-selection-color: var(--quiet-text-body);
    --quiet-shadow-color: black;
    --quiet-shadow-softer: 0 0.0625rem 0.0625rem color-mix(in oklab, transparent, var(--quiet-shadow-color) 4%);
    --quiet-shadow-soft: 0 0.125rem 0.1875rem color-mix(in oklab, transparent, var(--quiet-shadow-color) 8%);
    --quiet-shadow-mid: 0 0.1875rem 0.375rem color-mix(in oklab, transparent, var(--quiet-shadow-color) 10%);
    --quiet-shadow-loud: 0 0.375rem 0.75rem color-mix(in oklab, transparent, var(--quiet-shadow-color) 12%);
    --quiet-shadow-louder: 0 0.5rem 1rem color-mix(in oklab, transparent, var(--quiet-shadow-color) 14%);
    --quiet-inset-shadow-softer: inset 0 0.125rem 0.125rem -0.125rem color-mix(in oklab, black, transparent 94%);
    --quiet-inset-shadow-soft: inset 0 0.25rem 0.25rem -0.25rem color-mix(in oklab, black, transparent 90%);
    --quiet-inset-shadow-mid: inset 0 0.5rem 0.5rem -0.5rem color-mix(in oklab, black, transparent 88%);
    --quiet-inset-shadow-loud: inset 0 1rem 1rem -1rem color-mix(in oklab, black, transparent 85%);
    --quiet-inset-shadow-louder: inset 0 1.5rem 1.5rem -1.5rem color-mix(in oklab, black, transparent 82%);

    /* Primary */
    --quiet-primary-fill-softer: var(--quiet-primary-100);
    --quiet-primary-fill-soft: var(--quiet-primary-200);
    --quiet-primary-fill-mid: color-mix(in oklab, var(--quiet-primary-600), black 2.5%);
    --quiet-primary-fill-loud: var(--quiet-primary-800);
    --quiet-primary-fill-louder: var(--quiet-primary-900);
    --quiet-primary-text-on-soft: var(--quiet-primary-900);
    --quiet-primary-text-on-mid: white;
    --quiet-primary-text-on-loud: white;
    --quiet-primary-text-colorful: color-mix(in oklab, var(--quiet-primary-600), black 12.5%);
    --quiet-primary-stroke-softer: color-mix(in oklab, var(--quiet-primary-100), black 3%);
    --quiet-primary-stroke-soft: var(--quiet-primary-300);
    --quiet-primary-stroke-mid: var(--quiet-primary-500);

    /* Neutral */
    --quiet-neutral-fill-softer: var(--quiet-neutral-100);
    --quiet-neutral-fill-soft: var(--quiet-neutral-200);
    --quiet-neutral-fill-mid: color-mix(in oklab, var(--quiet-neutral-600), black 2.5%);
    --quiet-neutral-fill-loud: var(--quiet-neutral-800);
    --quiet-neutral-fill-louder: var(--quiet-neutral-900);
    --quiet-neutral-text-on-soft: var(--quiet-neutral-900);
    --quiet-neutral-text-on-mid: white;
    --quiet-neutral-text-on-loud: white;
    --quiet-neutral-text-colorful: color-mix(in oklab, var(--quiet-neutral-600), black 12.5%);
    --quiet-neutral-stroke-softer: color-mix(in oklab, var(--quiet-neutral-100), black 3%);
    --quiet-neutral-stroke-soft: var(--quiet-neutral-300);
    --quiet-neutral-stroke-mid: var(--quiet-neutral-500);

    /* Constructive */
    --quiet-constructive-fill-softer: var(--quiet-constructive-100);
    --quiet-constructive-fill-soft: var(--quiet-constructive-200);
    --quiet-constructive-fill-mid: color-mix(in oklab, var(--quiet-constructive-600), black 2.5%);
    --quiet-constructive-fill-loud: var(--quiet-constructive-800);
    --quiet-constructive-fill-louder: var(--quiet-constructive-900);
    --quiet-constructive-text-on-soft: var(--quiet-constructive-900);
    --quiet-constructive-text-on-mid: white;
    --quiet-constructive-text-on-loud: white;
    --quiet-constructive-text-colorful: color-mix(in oklab, var(--quiet-constructive-600), black 12.5%);
    --quiet-constructive-stroke-softer: color-mix(in oklab, var(--quiet-constructive-100), black 3%);
    --quiet-constructive-stroke-soft: var(--quiet-constructive-300);
    --quiet-constructive-stroke-mid: var(--quiet-constructive-500);

    /* Destructive */
    --quiet-destructive-fill-softer: var(--quiet-destructive-100);
    --quiet-destructive-fill-soft: var(--quiet-destructive-200);
    --quiet-destructive-fill-mid: color-mix(in oklab, var(--quiet-destructive-600), black 2.5%);
    --quiet-destructive-fill-loud: var(--quiet-destructive-800);
    --quiet-destructive-fill-louder: var(--quiet-destructive-900);
    --quiet-destructive-text-on-soft: var(--quiet-destructive-900);
    --quiet-destructive-text-on-mid: white;
    --quiet-destructive-text-on-loud: white;
    --quiet-destructive-text-colorful: color-mix(in oklab, var(--quiet-destructive-600), black 12.5%);
    --quiet-destructive-stroke-softer: color-mix(in oklab, var(--quiet-destructive-100), black 3%);
    --quiet-destructive-stroke-soft: var(--quiet-destructive-300);
    --quiet-destructive-stroke-mid: var(--quiet-destructive-500);
  }

  /*////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
  //
  //  Dark theme colors
  //
  ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

  .quiet-dark {
    color-scheme: dark;

    --quiet-silent: black;
    --quiet-strident: white;
    --quiet-background-color: var(--quiet-neutral-950);
    --quiet-paper-color: color-mix(in oklab, var(--quiet-neutral-950), white 2.5%);
    --quiet-text-body: var(--quiet-neutral-200);
    --quiet-text-muted: var(--quiet-neutral-500);
    --quiet-focus-color: var(--quiet-primary-fill-mid);
    --quiet-focus-ring: var(--quiet-border-style) var(--quiet-focus-width) var(--quiet-focus-color);
    --quiet-backdrop-color: rgb(0 0 0 / 0.5);
    --quiet-selection-background-color: var(--quiet-primary-700);
    --quiet-selection-color: var(--quiet-text-body);
    --quiet-shadow-color: black;
    --quiet-shadow-softer: 0 1px 2px color-mix(in oklab, transparent, var(--quiet-shadow-color) 8%);
    --quiet-shadow-soft: 0 2px 4px color-mix(in oklab, transparent, var(--quiet-shadow-color) 12%);
    --quiet-shadow-mid: 0 4px 8px color-mix(in oklab, transparent, var(--quiet-shadow-color) 16%);
    --quiet-shadow-loud: 0 8px 16px color-mix(in oklab, transparent, var(--quiet-shadow-color) 20%);
    --quiet-shadow-louder: 0 12px 20px color-mix(in oklab, transparent, var(--quiet-shadow-color) 24%);

    /* Primary */
    --quiet-primary-fill-softer: color-mix(in oklab, var(--quiet-primary-900), white 1%);
    --quiet-primary-fill-soft: var(--quiet-primary-800);
    --quiet-primary-fill-mid: color-mix(in oklab, var(--quiet-primary-600), black 7.5%);
    --quiet-primary-fill-loud: var(--quiet-primary-200);
    --quiet-primary-fill-louder: var(--quiet-primary-100);
    --quiet-primary-text-on-soft: var(--quiet-primary-100);
    --quiet-primary-text-on-mid: white;
    --quiet-primary-text-on-loud: black;
    --quiet-primary-text-colorful: var(--quiet-primary-500);
    --quiet-primary-stroke-softer: color-mix(in oklab, var(--quiet-primary-900), white 7.5%);
    --quiet-primary-stroke-soft: var(--quiet-primary-800);
    --quiet-primary-stroke-mid: var(--quiet-primary-600);

    /* Neutral */
    --quiet-neutral-fill-softer: color-mix(in oklab, var(--quiet-neutral-900), white 1%);
    --quiet-neutral-fill-soft: var(--quiet-neutral-800);
    --quiet-neutral-fill-mid: color-mix(in oklab, var(--quiet-neutral-600), black 7.5%);
    --quiet-neutral-fill-loud: var(--quiet-neutral-200);
    --quiet-neutral-fill-louder: var(--quiet-neutral-100);
    --quiet-neutral-text-on-soft: var(--quiet-neutral-100);
    --quiet-neutral-text-on-mid: white;
    --quiet-neutral-text-on-loud: black;
    --quiet-neutral-text-colorful: var(--quiet-neutral-500);
    --quiet-neutral-stroke-softer: color-mix(in oklab, var(--quiet-neutral-900), white 7.5%);
    --quiet-neutral-stroke-soft: var(--quiet-neutral-800);
    --quiet-neutral-stroke-mid: var(--quiet-neutral-600);

    /* Constructive */
    --quiet-constructive-fill-softer: color-mix(in oklab, var(--quiet-constructive-900), white 1%);
    --quiet-constructive-fill-soft: var(--quiet-constructive-800);
    --quiet-constructive-fill-mid: color-mix(in oklab, var(--quiet-constructive-600), black 8%);
    --quiet-constructive-fill-loud: var(--quiet-constructive-200);
    --quiet-constructive-fill-louder: var(--quiet-constructive-100);
    --quiet-constructive-text-on-soft: var(--quiet-constructive-100);
    --quiet-constructive-text-on-mid: white;
    --quiet-constructive-text-on-loud: black;
    --quiet-constructive-text-colorful: var(--quiet-constructive-500);
    --quiet-constructive-stroke-softer: color-mix(in oklab, var(--quiet-constructive-900), white 7.5%);
    --quiet-constructive-stroke-soft: var(--quiet-constructive-800);
    --quiet-constructive-stroke-mid: var(--quiet-constructive-600);

    /* Destructive */
    --quiet-destructive-fill-softer: color-mix(in oklab, var(--quiet-destructive-900), white 1%);
    --quiet-destructive-fill-soft: var(--quiet-destructive-800);
    --quiet-destructive-fill-mid: color-mix(in oklab, var(--quiet-destructive-600), black 7.5%);
    --quiet-destructive-fill-loud: var(--quiet-destructive-200);
    --quiet-destructive-fill-louder: var(--quiet-destructive-100);
    --quiet-destructive-text-on-soft: var(--quiet-destructive-100);
    --quiet-destructive-text-on-mid: white;
    --quiet-destructive-text-on-loud: black;
    --quiet-destructive-text-colorful: var(--quiet-destructive-500);
    --quiet-destructive-stroke-softer: color-mix(in oklab, var(--quiet-destructive-900), white 7.5%);
    --quiet-destructive-stroke-soft: var(--quiet-destructive-800);
    --quiet-destructive-stroke-mid: var(--quiet-destructive-600);
  }

  /*////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
  //
  //  Global styles to support nested themes
  //
  ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

  /* Ensure the body color is set correctly when applying these classes to specific elements */
  .quiet-light,
  .quiet-dark {
    color: var(--quiet-text-body);
  }

  /*////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
  //
  //  Guaranteed utilities
  //
  ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

  /*
    The cloak utility to reduce FOUCE when using the autoloader. This approach hides any element with the `quiet-cloak`
    class that has an undefined custom element until a) all elements are defined or b) two seconds has elapsed, ensuring
    the content is never hidden for too long in the case of slow or troublesome networks.
  */
  .quiet-cloak:has(:not(:defined)) {
    animation: 2s step-end quietCloakAnimation;
  }

  @keyframes quietCloakAnimation {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  /*////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
  //
  //  Built-in presets
  //
  ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

  .quiet-default {
    --quiet-primary-seed: #989cff;
  }

  .quiet-red {
    --quiet-primary-seed: #ef5655;
    --quiet-destructive-seed: #e89a26; /* to differentiate better */
  }

  .quiet-orange {
    --quiet-primary-seed: #f08039;
  }

  .quiet-amber {
    --quiet-primary-seed: #e89a26;
  }

  .quiet-yellow {
    --quiet-primary-seed: #dcb31e;
  }

  .quiet-lime {
    --quiet-primary-seed: #9abb28;
  }

  .quiet-green {
    --quiet-primary-seed: #5dbb55;
  }

  .quiet-emerald {
    --quiet-primary-seed: #47b873;
  }

  .quiet-teal {
    --quiet-primary-seed: #37b995;
  }

  .quiet-cyan {
    --quiet-primary-seed: #20b8bc;
  }

  .quiet-sky {
    --quiet-primary-seed: #1caedd;
  }

  .quiet-blue {
    --quiet-primary-seed: #4a97f4;
  }

  .quiet-indigo {
    --quiet-primary-seed: #6e85f8;
  }

  .quiet-violet {
    --quiet-primary-seed: #927cfb;
  }

  .quiet-purple {
    --quiet-primary-seed: #ae75f6;
  }

  .quiet-fuchsia {
    --quiet-primary-seed: #d26ae8;
  }

  .quiet-pink {
    --quiet-primary-seed: #e468b0;
  }

  .quiet-rose {
    --quiet-primary-seed: #ee6383;
    --quiet-destructive-seed: #e89a26; /* to differentiate better */
  }

  .quiet-slate {
    --quiet-primary-seed: #848da0;
  }

  .quiet-zinc {
    --quiet-primary-seed: #8b8c93;
  }

  .quiet-stone {
    --quiet-primary-seed: #918c87;
  }
}