:root {
  /*Primary HSL*/
  --op-color-primary-h: 169;
  --op-color-primary-s: 37%;
  --op-color-primary-s-alt: 51%;
  --op-color-primary-l: 26%;

  /*Secondary HSL*/
  --op-color-secondary-h: 9;
  --op-color-secondary-s: 70%;
  --op-color-secondary-s-alt: 50%;
  --op-color-secondary-l: 55%;

  /*Neutral HSL*/
  --op-color-neutral-h: 38;
  --op-color-neutral-s: 33%;
  --op-color-neutral-l: 95%;

  /*Alerts Notice HSL*/
  --op-color-alerts-notice-h: 174;
  --op-color-alerts-notice-s: 71%;
  --op-color-alerts-notice-s-alt: 51%;
  --op-color-alerts-notice-l: 26%;

  /*Alerts Info HSL*/
  --op-color-alerts-info-h: 204;
  --op-color-alerts-info-s: 100%;
  --op-color-alerts-info-s-alt: 80%;
  --op-color-alerts-info-l: 50%;

  /*Alerts Warning HSL*/
  --op-color-alerts-warning-h: 44;
  --op-color-alerts-warning-s: 100%;
  --op-color-alerts-warning-s-alt-low: 85%;
  --op-color-alerts-warning-s-alt-med: 90%;
  --op-color-alerts-warning-s-alt-high: 95%;
  --op-color-alerts-warning-l: 60%;

  /*Alerts Danger HSL*/
  --op-color-alerts-danger-h: 345;
  --op-color-alerts-danger-s: 100%;
  --op-color-alerts-danger-s-alt: 80%;
  --op-color-alerts-danger-l: 40%;

  --op-color-transparent-25: rgba(255, 255, 255, 0.25);
  --op-color-transparent-5: rgba(255, 255, 255, 0.5);
  --op-color-transparent-6: rgba(255, 255, 255, 0.6);
  --op-color-transparent-7: rgba(255, 255, 255, 0.7);
  --op-color-transparent-8: rgba(255, 255, 255, 0.8);

  --op-border-all: inset 0 0 0 var(--op-border-width);
  --op-border-modal-accent: var(--op-color-neutral-minus-four);
  --op-current-day-highlight: inset 0 0 0 var(--op-border-width-large) var(--op-color-primary-on-plus-seven);
  --op-holiday-highlight: inset 0 0 0 var(--op-border-width-large) var(--op-color-alerts-danger-base);

  --op-space-3x-large: calc(var(--op-space-scale-unit) * 3.2);
  --op-space-4x-large: calc(var(--op-space-scale-unit) * 4);
  --op-space-5x-large: calc(var(--op-space-scale-unit) * 8);

  --op-radius-x-small: 2px;
  --op-radius-small: 4px;
  --op-radius-medium: 8px;
  --op-radius-large: 12px;
  --op-radius-x-large: 16px;
  --op-radius-2x-large: 20px;
  --op-radius-3x-large: 30px;
  --op-radius-circle: 50%;
  --op-radius-pill: 9999px;

  --op-font-family: 'Reddit Sans', sans-serif;
  --op-font-family-secondary: 'Belanosima', sans-serif;
  --op-font-family-tertiary: 'Cantarell', serif;

  --op-color-neutral-plus-nine: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 98.5%);

  --op-color-purple: #821bc0;

  /* Home / journaling palette — paper, ink, and natural accents */
  --home-paper: #f3ead9;
  --home-paper-soft: #f7efe0;
  --home-paper-deep: #ebdfc6;
  --home-paper-line: #e1d4b6;
  --home-ink: #2b2a26;
  --home-ink-soft: #5a544a;
  --home-ink-faint: #8a8274;
  --home-accent-sage: #94a58c;
  --home-accent-sage-deep: #6d8067;
  --home-accent-clay: #c9967a;
  --home-accent-clay-deep: #a86f52;
  --home-accent-dusk: #9aa3b8;
  --home-accent-ink: #3a3832;
  --home-accent-gold: #b89256;
  --home-serif: 'Cormorant Garamond', 'Times New Roman', Georgia, serif;
  --home-shadow-soft: 0 30px 60px -30px rgba(54, 45, 30, 0.22), 0 12px 28px -12px rgba(54, 45, 30, 0.14);
  --home-shadow-card: 0 24px 48px -28px rgba(54, 45, 30, 0.34), 0 10px 24px -16px rgba(54, 45, 30, 0.18);
  --home-shadow-input: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 12px 28px -22px rgba(54, 45, 30, 0.35), 0 4px 10px -8px rgba(54, 45, 30, 0.18);
  --home-shadow-input-focus: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 0 0 4px rgba(109, 128, 103, 0.18), 0 16px 32px -22px rgba(54, 45, 30, 0.35);
  --home-border-faint: rgba(90, 84, 74, 0.18);
  --home-border-medium: rgba(90, 84, 74, 0.32);
  --home-max: 124rem;

  --op-transition-modal: all 150ms ease-in;
  --op-z-index-drawer-backdrop: 699;
  --z-index-popup: 2;

  /* Secondary Color Scale */
  --op-color-secondary-original: hsl(var(--op-color-secondary-h) var(--op-color-secondary-s) var(--op-color-secondary-l));

  /* Main Scale */
  --op-color-secondary-plus-max: light-dark(
    hsl(var(--op-color-secondary-h) var(--op-color-secondary-s) 100%),
    hsl(var(--op-color-secondary-h) var(--op-color-secondary-s) 12%)
  );
  --op-color-secondary-plus-eight: light-dark(
    hsl(var(--op-color-secondary-h) var(--op-color-secondary-s) 98%),
    hsl(var(--op-color-secondary-h) var(--op-color-secondary-s) 14%)
  );
  --op-color-secondary-plus-seven: light-dark(
    hsl(var(--op-color-secondary-h) var(--op-color-secondary-s) 96%),
    hsl(var(--op-color-secondary-h) var(--op-color-secondary-s) 16%)
  );
  --op-color-secondary-plus-six: light-dark(
    hsl(var(--op-color-secondary-h) var(--op-color-secondary-s) 94%),
    hsl(var(--op-color-secondary-h) var(--op-color-secondary-s) 20%)
  );
  --op-color-secondary-plus-five: light-dark(
    hsl(var(--op-color-secondary-h) var(--op-color-secondary-s) 90%),
    hsl(var(--op-color-secondary-h) var(--op-color-secondary-s) 24%)
  );
  --op-color-secondary-plus-four: light-dark(
    hsl(var(--op-color-secondary-h) var(--op-color-secondary-s) 84%),
    hsl(var(--op-color-secondary-h) var(--op-color-secondary-s) 26%)
  );
  --op-color-secondary-plus-three: light-dark(
    hsl(var(--op-color-secondary-h) var(--op-color-secondary-s) 70%),
    hsl(var(--op-color-secondary-h) var(--op-color-secondary-s) 29%)
  );
  --op-color-secondary-plus-two: light-dark(
    hsl(var(--op-color-secondary-h) var(--op-color-secondary-s) 64%),
    hsl(var(--op-color-secondary-h) var(--op-color-secondary-s) 32%)
  );
  --op-color-secondary-plus-one: light-dark(
    hsl(var(--op-color-secondary-h) var(--op-color-secondary-s) 45%),
    hsl(var(--op-color-secondary-h) var(--op-color-secondary-s) 35%)
  );
  --op-color-secondary-base: light-dark(
    hsl(var(--op-color-secondary-h) var(--op-color-secondary-s) 40%),
    hsl(var(--op-color-secondary-h) var(--op-color-secondary-s) 38%)
  );
  --op-color-secondary-minus-one: light-dark(
    hsl(var(--op-color-secondary-h) var(--op-color-secondary-s) 36%),
    hsl(var(--op-color-secondary-h) var(--op-color-secondary-s) 40%)
  );
  --op-color-secondary-minus-two: light-dark(
    hsl(var(--op-color-secondary-h) var(--op-color-secondary-s) 32%),
    hsl(var(--op-color-secondary-h) var(--op-color-secondary-s) 45%)
  );
  --op-color-secondary-minus-three: light-dark(
    hsl(var(--op-color-secondary-h) var(--op-color-secondary-s) 28%),
    hsl(var(--op-color-secondary-h) var(--op-color-secondary-s) 48%)
  );
  --op-color-secondary-minus-four: light-dark(
    hsl(var(--op-color-secondary-h) var(--op-color-secondary-s) 24%),
    hsl(var(--op-color-secondary-h) var(--op-color-secondary-s) 52%)
  );
  --op-color-secondary-minus-five: light-dark(
    hsl(var(--op-color-secondary-h) var(--op-color-secondary-s) 20%),
    hsl(var(--op-color-secondary-h) var(--op-color-secondary-s) 64%)
  );
  --op-color-secondary-minus-six: light-dark(
    hsl(var(--op-color-secondary-h) var(--op-color-secondary-s) 16%),
    hsl(var(--op-color-secondary-h) var(--op-color-secondary-s) 72%)
  );
  --op-color-secondary-minus-seven: light-dark(
    hsl(var(--op-color-secondary-h) var(--op-color-secondary-s) 8%),
    hsl(var(--op-color-secondary-h) var(--op-color-secondary-s) 80%)
  );
  --op-color-secondary-minus-eight: light-dark(
    hsl(var(--op-color-secondary-h) var(--op-color-secondary-s) 4%),
    hsl(var(--op-color-secondary-h) var(--op-color-secondary-s) 88%)
  );
  --op-color-secondary-minus-max: light-dark(
    hsl(var(--op-color-secondary-h) var(--op-color-secondary-s) 0%),
    hsl(var(--op-color-secondary-h) var(--op-color-secondary-s) 100%)
  );

  /* On Scale */
  --op-color-secondary-on-plus-max: light-dark(
    hsl(var(--op-color-secondary-h) var(--op-color-secondary-s) 0%),
    hsl(var(--op-color-secondary-h) var(--op-color-secondary-s) 100%)
  );
  --op-color-secondary-on-plus-max-alt: light-dark(
    hsl(var(--op-color-secondary-h) var(--op-color-secondary-s) 20%),
    hsl(var(--op-color-secondary-h) var(--op-color-secondary-s) 78%)
  );
  --op-color-secondary-on-plus-eight: light-dark(
    hsl(var(--op-color-secondary-h) var(--op-color-secondary-s) 4%),
    hsl(var(--op-color-secondary-h) var(--op-color-secondary-s) 88%)
  );
  --op-color-secondary-on-plus-eight-alt: light-dark(
    hsl(var(--op-color-secondary-h) var(--op-color-secondary-s) 24%),
    hsl(var(--op-color-secondary-h) var(--op-color-secondary-s) 70%)
  );
  --op-color-secondary-on-plus-seven: light-dark(
    hsl(var(--op-color-secondary-h) var(--op-color-secondary-s) 8%),
    hsl(var(--op-color-secondary-h) var(--op-color-secondary-s) 80%)
  );
  --op-color-secondary-on-plus-seven-alt: light-dark(
    hsl(var(--op-color-secondary-h) var(--op-color-secondary-s) 28%),
    hsl(var(--op-color-secondary-h) var(--op-color-secondary-s) 64%)
  );
  --op-color-secondary-on-plus-six: light-dark(
    hsl(var(--op-color-secondary-h) var(--op-color-secondary-s) 16%),
    hsl(var(--op-color-secondary-h) var(--op-color-secondary-s) 72%)
  );
  --op-color-secondary-on-plus-six-alt: light-dark(
    hsl(var(--op-color-secondary-h) var(--op-color-secondary-s) 26%),
    hsl(var(--op-color-secondary-h) var(--op-color-secondary-s) 96%)
  );
  --op-color-secondary-on-plus-five: light-dark(
    hsl(var(--op-color-secondary-h) var(--op-color-secondary-s) 20%),
    hsl(var(--op-color-secondary-h) var(--op-color-secondary-s) 72%)
  );
  --op-color-secondary-on-plus-five-alt: light-dark(
    hsl(var(--op-color-secondary-h) var(--op-color-secondary-s) 40%),
    hsl(var(--op-color-secondary-h) var(--op-color-secondary-s) 86%)
  );
  --op-color-secondary-on-plus-four: light-dark(
    hsl(var(--op-color-secondary-h) var(--op-color-secondary-s) 24%),
    hsl(var(--op-color-secondary-h) var(--op-color-secondary-s) 80%)
  );
  --op-color-secondary-on-plus-four-alt: light-dark(
    hsl(var(--op-color-secondary-h) var(--op-color-secondary-s) 4%),
    hsl(var(--op-color-secondary-h) var(--op-color-secondary-s) 92%)
  );
  --op-color-secondary-on-plus-three: light-dark(
    hsl(var(--op-color-secondary-h) var(--op-color-secondary-s) 20%),
    hsl(var(--op-color-secondary-h) var(--op-color-secondary-s) 78%)
  );
  --op-color-secondary-on-plus-three-alt: light-dark(
    hsl(var(--op-color-secondary-h) var(--op-color-secondary-s) 10%),
    hsl(var(--op-color-secondary-h) var(--op-color-secondary-s) 98%)
  );
  --op-color-secondary-on-plus-two: light-dark(
    hsl(var(--op-color-secondary-h) var(--op-color-secondary-s) 16%),
    hsl(var(--op-color-secondary-h) var(--op-color-secondary-s) 80%)
  );
  --op-color-secondary-on-plus-two-alt: light-dark(
    hsl(var(--op-color-secondary-h) var(--op-color-secondary-s) 6%),
    hsl(var(--op-color-secondary-h) var(--op-color-secondary-s) 92%)
  );
  --op-color-secondary-on-plus-one: light-dark(
    hsl(var(--op-color-secondary-h) var(--op-color-secondary-s) 100%),
    hsl(var(--op-color-secondary-h) var(--op-color-secondary-s) 80%)
  );
  --op-color-secondary-on-plus-one-alt: light-dark(
    hsl(var(--op-color-secondary-h) var(--op-color-secondary-s) 95%),
    hsl(var(--op-color-secondary-h) var(--op-color-secondary-s) 98%)
  );
  --op-color-secondary-on-base: light-dark(
    hsl(var(--op-color-secondary-h) var(--op-color-secondary-s) 100%),
    hsl(var(--op-color-secondary-h) var(--op-color-secondary-s) 100%)
  );
  --op-color-secondary-on-base-alt: light-dark(
    hsl(var(--op-color-secondary-h) var(--op-color-secondary-s) 88%),
    hsl(var(--op-color-secondary-h) var(--op-color-secondary-s) 84%)
  );
  --op-color-secondary-on-minus-one: light-dark(
    hsl(var(--op-color-secondary-h) var(--op-color-secondary-s) 94%),
    hsl(var(--op-color-secondary-h) var(--op-color-secondary-s) 98%)
  );
  --op-color-secondary-on-minus-one-alt: light-dark(
    hsl(var(--op-color-secondary-h) var(--op-color-secondary-s) 82%),
    hsl(var(--op-color-secondary-h) var(--op-color-secondary-s) 90%)
  );
  --op-color-secondary-on-minus-two: light-dark(
    hsl(var(--op-color-secondary-h) var(--op-color-secondary-s) 90%),
    hsl(var(--op-color-secondary-h) var(--op-color-secondary-s) 98%)
  );
  --op-color-secondary-on-minus-two-alt: light-dark(
    hsl(var(--op-color-secondary-h) var(--op-color-secondary-s) 78%),
    hsl(var(--op-color-secondary-h) var(--op-color-secondary-s) 92%)
  );
  --op-color-secondary-on-minus-three: light-dark(
    hsl(var(--op-color-secondary-h) var(--op-color-secondary-s) 86%),
    hsl(var(--op-color-secondary-h) var(--op-color-secondary-s) 98%)
  );
  --op-color-secondary-on-minus-three-alt: light-dark(
    hsl(var(--op-color-secondary-h) var(--op-color-secondary-s) 74%),
    hsl(var(--op-color-secondary-h) var(--op-color-secondary-s) 96%)
  );
  --op-color-secondary-on-minus-four: light-dark(
    hsl(var(--op-color-secondary-h) var(--op-color-secondary-s) 84%),
    hsl(var(--op-color-secondary-h) var(--op-color-secondary-s) 2%)
  );
  --op-color-secondary-on-minus-four-alt: light-dark(
    hsl(var(--op-color-secondary-h) var(--op-color-secondary-s) 72%),
    hsl(var(--op-color-secondary-h) var(--op-color-secondary-s) 2%)
  );
  --op-color-secondary-on-minus-five: light-dark(
    hsl(var(--op-color-secondary-h) var(--op-color-secondary-s) 88%),
    hsl(var(--op-color-secondary-h) var(--op-color-secondary-s) 2%)
  );
  --op-color-secondary-on-minus-five-alt: light-dark(
    hsl(var(--op-color-secondary-h) var(--op-color-secondary-s) 78%),
    hsl(var(--op-color-secondary-h) var(--op-color-secondary-s) 20%)
  );
  --op-color-secondary-on-minus-six: light-dark(
    hsl(var(--op-color-secondary-h) var(--op-color-secondary-s) 94%),
    hsl(var(--op-color-secondary-h) var(--op-color-secondary-s) 8%)
  );
  --op-color-secondary-on-minus-six-alt: light-dark(
    hsl(var(--op-color-secondary-h) var(--op-color-secondary-s) 82%),
    hsl(var(--op-color-secondary-h) var(--op-color-secondary-s) 26%)
  );
  --op-color-secondary-on-minus-seven: light-dark(
    hsl(var(--op-color-secondary-h) var(--op-color-secondary-s) 96%),
    hsl(var(--op-color-secondary-h) var(--op-color-secondary-s) 8%)
  );
  --op-color-secondary-on-minus-seven-alt: light-dark(
    hsl(var(--op-color-secondary-h) var(--op-color-secondary-s) 84%),
    hsl(var(--op-color-secondary-h) var(--op-color-secondary-s) 34%)
  );
  --op-color-secondary-on-minus-eight: light-dark(
    hsl(var(--op-color-secondary-h) var(--op-color-secondary-s) 98%),
    hsl(var(--op-color-secondary-h) var(--op-color-secondary-s) 4%)
  );
  --op-color-secondary-on-minus-eight-alt: light-dark(
    hsl(var(--op-color-secondary-h) var(--op-color-secondary-s) 86%),
    hsl(var(--op-color-secondary-h) var(--op-color-secondary-s) 38%)
  );
  --op-color-secondary-on-minus-max: light-dark(
    hsl(var(--op-color-secondary-h) var(--op-color-secondary-s) 100%),
    hsl(var(--op-color-secondary-h) var(--op-color-secondary-s) 0%)
  );
  --op-color-secondary-on-minus-max-alt: light-dark(
    hsl(var(--op-color-secondary-h) var(--op-color-secondary-s) 88%),
    hsl(var(--op-color-secondary-h) var(--op-color-secondary-s) 38%)
  );
}