/* Material 3 design tokens: https://m3.material.io/foundations/design-tokens/overview */

/* ---------- Colour roles: https://m3.material.io/styles/color/roles ---------- */
:root{
  color-scheme:light;

  --md-sys-color-primary:#2C6A46;
  --md-sys-color-on-primary:#FFFFFF;
  --md-sys-color-primary-container:#AFF1C3;
  --md-sys-color-on-primary-container:#0D5130;
  --md-sys-color-secondary:#4F6354;
  --md-sys-color-on-secondary:#FFFFFF;
  --md-sys-color-secondary-container:#D1E8D5;
  --md-sys-color-on-secondary-container:#374B3D;
  --md-sys-color-tertiary:#835400;
  --md-sys-color-on-tertiary:#FFFFFF;
  --md-sys-color-tertiary-container:#FFDDB5;
  --md-sys-color-on-tertiary-container:#643F00;
  --md-sys-color-error:#BA1A1A;
  --md-sys-color-on-error:#FFFFFF;
  --md-sys-color-surface:#FFFFFF;
  --md-sys-color-on-surface:#1E2422;
  --md-sys-color-on-surface-variant:#414942;
  --md-sys-color-surface-container-low:#F1F3EE;
  --md-sys-color-surface-container:#EAEFE8;
  --md-sys-color-surface-container-high:#E5EAE2;
  --md-sys-color-surface-container-highest:#DFE4DD;
  --md-sys-color-outline:#717971;
  --md-sys-color-outline-variant:#C0C9C0;

  --md-sys-color-inverse-surface:#2C322D;
  --md-sys-color-inverse-on-surface:#EDF2EB;
  --md-sys-color-inverse-primary:#94D5A8;

  --md-sys-color-scrim:#000000;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;

    --md-sys-color-primary:#94D5A8;
    --md-sys-color-on-primary:#00391E;
    --md-sys-color-primary-container:#0D5130;
    --md-sys-color-on-primary-container:#AFF1C3;
    --md-sys-color-secondary:#B6CCB9;
    --md-sys-color-on-secondary:#213527;
    --md-sys-color-secondary-container:#374B3D;
    --md-sys-color-on-secondary-container:#D1E8D5;
    --md-sys-color-tertiary:#FFB956;
    --md-sys-color-on-tertiary:#462B00;
    --md-sys-color-tertiary-container:#643F00;
    --md-sys-color-on-tertiary-container:#FFDDB5;
    --md-sys-color-error:#FFB4AB;
    --md-sys-color-on-error:#690005;
    --md-sys-color-surface:#0F1511;
    --md-sys-color-on-surface:#DFE4DD;
    --md-sys-color-on-surface-variant:#C0C9C0;
    --md-sys-color-surface-container-low:#181D19;
    --md-sys-color-surface-container:#1C211D;
    --md-sys-color-surface-container-high:#262B27;
    --md-sys-color-surface-container-highest:#313631;
    --md-sys-color-outline:#8A938B;
    --md-sys-color-outline-variant:#414942;

    --md-sys-color-inverse-surface:#DFE4DD;
    --md-sys-color-inverse-on-surface:#2C322D;
    --md-sys-color-inverse-primary:#2C6A46;

    --ink:var(--md-sys-color-on-surface);
    --paper:var(--md-sys-color-surface);
    --paper-raised:var(--md-sys-color-surface-container-low);
    --moss:var(--md-sys-color-primary);
    --line:var(--md-sys-color-outline-variant);
    --track:var(--md-sys-color-surface-container-highest);
    --choice-unselected:var(--md-sys-color-surface-container-high);
    --choice-selected:var(--md-sys-color-tertiary-container);
    --muted:var(--md-sys-color-on-surface-variant);
    --shadow:none;
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;

  --md-sys-color-primary:#94D5A8;
  --md-sys-color-on-primary:#00391E;
  --md-sys-color-primary-container:#0D5130;
  --md-sys-color-on-primary-container:#AFF1C3;
  --md-sys-color-secondary:#B6CCB9;
  --md-sys-color-on-secondary:#213527;
  --md-sys-color-secondary-container:#374B3D;
  --md-sys-color-on-secondary-container:#D1E8D5;
  --md-sys-color-tertiary:#FFB956;
  --md-sys-color-on-tertiary:#462B00;
  --md-sys-color-tertiary-container:#643F00;
  --md-sys-color-on-tertiary-container:#FFDDB5;
  --md-sys-color-error:#FFB4AB;
  --md-sys-color-on-error:#690005;
  --md-sys-color-surface:#0F1511;
  --md-sys-color-on-surface:#DFE4DD;
  --md-sys-color-on-surface-variant:#C0C9C0;
  --md-sys-color-surface-container-low:#181D19;
  --md-sys-color-surface-container:#1C211D;
  --md-sys-color-surface-container-high:#262B27;
  --md-sys-color-surface-container-highest:#313631;
  --md-sys-color-outline:#8A938B;
  --md-sys-color-outline-variant:#414942;

  --md-sys-color-inverse-surface:#DFE4DD;
  --md-sys-color-inverse-on-surface:#2C322D;
  --md-sys-color-inverse-primary:#2C6A46;

  --ink:var(--md-sys-color-on-surface);
  --paper:var(--md-sys-color-surface);
  --paper-raised:var(--md-sys-color-surface-container-low);
  --moss:var(--md-sys-color-primary);
  --line:var(--md-sys-color-outline-variant);
  --track:var(--md-sys-color-surface-container-highest);
  --choice-unselected:var(--md-sys-color-surface-container-high);
  --choice-selected:var(--md-sys-color-tertiary-container);
  --muted:var(--md-sys-color-on-surface-variant);
  --shadow:none;
}

/* ---------- Type scale: https://m3.material.io/styles/typography/type-scale-tokens ---------- */
:root{
  --md-sys-typescale-font:'Roboto', system-ui, -apple-system, "Segoe UI", sans-serif;

  --md-sys-typescale-headline-small-size:24px;
  --md-sys-typescale-headline-small-line-height:32px;
  --md-sys-typescale-headline-small-weight:400;
  --md-sys-typescale-headline-small-tracking:0;

  --md-sys-typescale-title-large-size:22px;
  --md-sys-typescale-title-large-line-height:28px;
  --md-sys-typescale-title-large-weight:400;
  --md-sys-typescale-title-large-tracking:0;

  --md-sys-typescale-title-medium-size:16px;
  --md-sys-typescale-title-medium-line-height:24px;
  --md-sys-typescale-title-medium-weight:500;
  --md-sys-typescale-title-medium-tracking:0.15px;

  --md-sys-typescale-title-small-size:14px;
  --md-sys-typescale-title-small-line-height:20px;
  --md-sys-typescale-title-small-weight:500;
  --md-sys-typescale-title-small-tracking:0.1px;

  --md-sys-typescale-body-large-size:16px;
  --md-sys-typescale-body-large-line-height:24px;
  --md-sys-typescale-body-large-weight:400;
  --md-sys-typescale-body-large-tracking:0.5px;

  --md-sys-typescale-body-medium-size:14px;
  --md-sys-typescale-body-medium-line-height:20px;
  --md-sys-typescale-body-medium-weight:400;
  --md-sys-typescale-body-medium-tracking:0.25px;

  --md-sys-typescale-body-small-size:12px;
  --md-sys-typescale-body-small-line-height:16px;
  --md-sys-typescale-body-small-weight:400;
  --md-sys-typescale-body-small-tracking:0.4px;

  --md-sys-typescale-label-large-size:14px;
  --md-sys-typescale-label-large-line-height:20px;
  --md-sys-typescale-label-large-weight:500;
  --md-sys-typescale-label-large-tracking:0.1px;

  --md-sys-typescale-label-medium-size:12px;
  --md-sys-typescale-label-medium-line-height:16px;
  --md-sys-typescale-label-medium-weight:500;
  --md-sys-typescale-label-medium-tracking:0.5px;

  --md-sys-typescale-label-small-size:11px;
  --md-sys-typescale-label-small-line-height:16px;
  --md-sys-typescale-label-small-weight:500;
  --md-sys-typescale-label-small-tracking:0.5px;
}

/* ---------- Shape, state, elevation and motion ----------
   https://m3.material.io/styles/shape/corner-radius-scale
   https://m3.material.io/foundations/interaction/states/state-layers
   https://m3.material.io/styles/elevation/tokens
   https://m3.material.io/styles/motion/easing-and-duration/tokens-specs */
:root{
  --md-sys-shape-corner-full:9999px;
  --md-sys-shape-corner-extra-large:28px;
  --md-sys-shape-corner-medium:12px;
  --md-sys-shape-corner-small:8px;
  --md-sys-shape-corner-extra-small:4px;

  --md-sys-state-hover-state-layer-opacity:0.08;
  --md-sys-state-focus-state-layer-opacity:0.10;
  --md-sys-state-pressed-state-layer-opacity:0.10;

  --md-sys-elevation-2:0 1px 2px rgba(0,0,0,0.30), 0 2px 6px 2px rgba(0,0,0,0.15);
  --md-sys-elevation-3:0 1px 3px rgba(0,0,0,0.30), 0 4px 8px 3px rgba(0,0,0,0.15);

  --md-sys-motion-easing-emphasized-decelerate:cubic-bezier(0.05, 0.7, 0.1, 1);
}

/* ---------- Ripple: https://m3.material.io/foundations/interaction/states/applying-states ---------- */
.m3-ripple{
  position:absolute;
  border-radius:50%;
  background:currentColor;
  opacity:0;
  transform:scale(0);
  pointer-events:none;
  animation:m3-ripple 450ms cubic-bezier(0.2, 0, 0, 1) forwards;
}
@keyframes m3-ripple{
  0%{ transform:scale(0); opacity:0.16; }
  60%{ opacity:0.12; }
  100%{ transform:scale(1); opacity:0; }
}
@media (prefers-reduced-motion: reduce){
  .m3-ripple{ display:none; }
}
.m3-ripple-host{
  position:absolute;
  z-index:3;
  overflow:hidden;
  pointer-events:none;
}