/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

@import url("/assets/beer-ef10d44c.css");

/* Theme */

:root, body.light {
  /* Primary - using your accent color */
  --primary: #A463F2;
  --on-primary: #FFFFFF;
  --primary-container: #F4F4F4;
  --on-primary-container: #000000;

  /* Secondary - using a slightly muted version of your accent */
  --secondary: #5E2CA5;
  --on-secondary: #FFFFFF;
  --secondary-container: #DEDEDE;
  --on-secondary-container: #000000;

  /* Tertiary - using a blend between your accent and neutrals */
  --tertiary: #8157C4;
  --on-tertiary: #FFFFFF;
  --tertiary-container: #F4F4F4;
  --on-tertiary-container: #291450;

  /* Error - keeping a standard error color that works with your palette */
  --error: #ba1a1a;
  --on-error: #FFFFFF;
  --error-container: #FAFAFA;
  --on-error-container: #410002;

  /* Background and surfaces - using your neutral tones */
  --background: #FFFFFF;
  --on-background: #000000;
  --surface: #FAFAFA;
  --on-surface: #000000;
  --surface-variant: #F4F4F4;
  --on-surface-variant: #565656;

  /* Outlines and other elements */
  --outline: #565656;
  --outline-variant: #F4F4F4;
  --shadow: #000000;
  --scrim: #000000;

  /* Inverse surfaces */
  --inverse-surface: #565656;
  --inverse-on-surface: #FFFFFF;
  --inverse-primary: #A463F2;

  /* Surface containers */
  --surface-dim: #FAFAFA;
  --surface-bright: #FFFFFF;
  --surface-container-lowest: #FFFFFF;
  --surface-container-low: #F4F4F4;
  --surface-container: #F4F4F4;
  --surface-container-high: #EEEEEE;
  --surface-container-highest: #E8E8E8;
}

/* Inter Setup */
:root {
  --font: system-ui, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif;
  --font-serif: ui-serif, serif;
  --font-mono: ui-monospace, monospace;
  font-feature-settings: "dlig", "ss07", "ss08", "cv01", "cv02", "cv03", "cv04", "cv05", "cv10";
}


/*darkmode*/
@media (prefers-color-scheme:dark) {
  .filter-dm-invert {
    filter: invert(100%);
  }

  .filter-dm-darken {
    filter: brightness(0.5);
  }

}

.antialiased {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale
}

.filter-darken {
  filter: brightness(0.5);
}

.invert-always {
  filter: invert(100%);
}

.grayscale {
  filter: grayscale(100%);
}

li {
  list-style-position: inside;
}

main.responsive.extra {
  max-width: 1200px;
}

main.responsive.ultra {
  max-width: 1860px;
}

.width-extra {
  max-width: 1200px;
  margin: 0 auto;
}

.width-ultra {
  max-width: 1600px;
  margin: 0 auto;
}

.pattern-circles {
  background-color: var(--surface-variant);
  /*  opacity: 0.8;*/
  background-image: radial-gradient(circle at center center, var(--inverse-primary), var(--tertiary-container)), repeating-radial-gradient(circle at center center, var(--inverse-primary), var(--inverse-primary), 10px, transparent 20px, transparent 10px);
  background-blend-mode: multiply;
}

/* Cutom */
.serif {
  font-family: var(--font-serif);
}

.mono {
  font-family: var(--font-mono);
}

/* Measure is limited to 66 characters */
.measure {
  max-width: 66ch;
}

/* Measure is limited to ~80 characters */
.measure-wide {
  max-width: 80ch;
}

/* Measure is limited to 45 characters */
.measure-narrow {
  max-width: 45ch;
}