/* ============================================================
   Canonical Material 3 token layer.

   Real material-esm / material-web components read `--md-sys-*` names,
   not app-specific ones. This file publishes the palette under the
   canonical names and the app's short aliases point at them, so:

     · dropping <md-button> etc. into the page themes correctly
     · regenerating the palette in the Material Theme Builder is a
       single find-and-replace in ONE file

   Load order matters: tokens.css first, then styles.css.
   ============================================================ */

:root{
  /* ---- reference: typefaces ---- */
  --md-ref-typeface-brand:"Google Sans Flex","Roboto Flex",system-ui,-apple-system,"Segoe UI",sans-serif;
  --md-ref-typeface-plain:"Roboto Flex","Google Sans Flex",system-ui,-apple-system,"Segoe UI",sans-serif;
  --md-ref-typeface-weight-regular:400;
  --md-ref-typeface-weight-medium:500;
  --md-ref-typeface-weight-bold:700;

  /* ---- system: colour roles (light) ---- */
  --md-sys-color-primary:#4C662B;
  --md-sys-color-on-primary:#FFFFFF;
  --md-sys-color-primary-container:#CDEDA3;
  --md-sys-color-on-primary-container:#354E16;
  --md-sys-color-secondary:#586249;
  --md-sys-color-on-secondary:#FFFFFF;
  --md-sys-color-secondary-container:#DCE7C8;
  --md-sys-color-on-secondary-container:#404A33;
  --md-sys-color-tertiary:#386663;
  --md-sys-color-on-tertiary:#FFFFFF;
  --md-sys-color-tertiary-container:#BCECE7;
  --md-sys-color-on-tertiary-container:#1F4E4B;
  --md-sys-color-error:#BA1A1A;
  --md-sys-color-on-error:#FFFFFF;
  --md-sys-color-error-container:#FFDAD6;
  --md-sys-color-on-error-container:#93000A;
  --md-sys-color-surface:#F9FAEF;
  --md-sys-color-on-surface:#1A1C16;
  --md-sys-color-surface-container-lowest:#FFFFFF;
  --md-sys-color-surface-container-low:#F3F4E9;
  --md-sys-color-surface-container:#EDEEE3;
  --md-sys-color-surface-container-high:#E7E8DE;
  --md-sys-color-surface-container-highest:#E2E3D8;
  --md-sys-color-surface-variant:#E1E4D5;
  --md-sys-color-on-surface-variant:#44483D;
  --md-sys-color-outline:#75796C;
  --md-sys-color-outline-variant:#C5C8BA;
  --md-sys-color-inverse-surface:#2F312A;
  --md-sys-color-inverse-on-surface:#F1F2E6;
  --md-sys-color-inverse-primary:#B1D18A;
  --md-sys-color-scrim:rgba(0,0,0,.42);
  --md-sys-color-shadow:#000000;

  /* ---- system: shape scale ---- */
  --md-sys-shape-corner-none:0px;
  --md-sys-shape-corner-extra-small:4px;
  --md-sys-shape-corner-small:8px;
  --md-sys-shape-corner-medium:12px;
  --md-sys-shape-corner-large:16px;
  --md-sys-shape-corner-large-increased:20px;
  --md-sys-shape-corner-extra-large:28px;
  --md-sys-shape-corner-extra-large-increased:32px;
  --md-sys-shape-corner-extra-extra-large:48px;
  --md-sys-shape-corner-full:9999px;

  /* ---- system: motion ----
     Expressive springs overshoot, so easings are modelled as beziers that
     pass 1.0 before settling. Durations follow the M3 duration tokens. */
  --md-sys-motion-easing-standard:cubic-bezier(.2,0,0,1);
  --md-sys-motion-easing-emphasized:cubic-bezier(.34,1.32,.36,1);
  --md-sys-motion-easing-spring-fast:cubic-bezier(.3,1.4,.4,1);
  --md-sys-motion-easing-spring-slow:cubic-bezier(.36,1.18,.3,1);
  --md-sys-motion-duration-short:200ms;
  --md-sys-motion-duration-medium:400ms;
  --md-sys-motion-duration-long:600ms;

  /* ---- system: type scale (size / line-height, dp) ---- */
  --md-sys-typescale-display-large-size:57px;   --md-sys-typescale-display-large-line-height:64px;
  --md-sys-typescale-headline-large-size:32px;  --md-sys-typescale-headline-large-line-height:40px;
  --md-sys-typescale-title-large-size:22px;     --md-sys-typescale-title-large-line-height:28px;
  --md-sys-typescale-body-large-size:16px;      --md-sys-typescale-body-large-line-height:24px;
  --md-sys-typescale-body-medium-size:14px;     --md-sys-typescale-body-medium-line-height:20px;
  --md-sys-typescale-label-large-size:14px;     --md-sys-typescale-label-large-line-height:20px;
}

[data-theme="dark"]{
  --md-sys-color-primary:#B1D18A;
  --md-sys-color-on-primary:#1F3701;
  --md-sys-color-primary-container:#354E16;
  --md-sys-color-on-primary-container:#CDEDA3;
  --md-sys-color-secondary:#BFCBAD;
  --md-sys-color-on-secondary:#2A331E;
  --md-sys-color-secondary-container:#404A33;
  --md-sys-color-on-secondary-container:#DCE7C8;
  --md-sys-color-tertiary:#A0D0CB;
  --md-sys-color-on-tertiary:#003735;
  --md-sys-color-tertiary-container:#1F4E4B;
  --md-sys-color-on-tertiary-container:#BCECE7;
  --md-sys-color-error:#FFB4AB;
  --md-sys-color-on-error:#690005;
  --md-sys-color-error-container:#93000A;
  --md-sys-color-on-error-container:#FFDAD6;
  --md-sys-color-surface:#12140E;
  --md-sys-color-on-surface:#E2E3D8;
  --md-sys-color-surface-container-lowest:#0C0F09;
  --md-sys-color-surface-container-low:#1A1C16;
  --md-sys-color-surface-container:#1E201A;
  --md-sys-color-surface-container-high:#282B24;
  --md-sys-color-surface-container-highest:#33362E;
  --md-sys-color-surface-variant:#44483D;
  --md-sys-color-on-surface-variant:#C5C8BA;
  --md-sys-color-outline:#8F9285;
  --md-sys-color-outline-variant:#44483D;
  --md-sys-color-inverse-surface:#E2E3D8;
  --md-sys-color-inverse-on-surface:#2F312A;
  --md-sys-color-inverse-primary:#4C662B;
  --md-sys-color-scrim:rgba(0,0,0,.62);
}

/* ---- app aliases: short names used throughout styles.css ---- */
:root,[data-theme="dark"]{
  --primary:var(--md-sys-color-primary);
  --on-primary:var(--md-sys-color-on-primary);
  --primary-container:var(--md-sys-color-primary-container);
  --on-primary-container:var(--md-sys-color-on-primary-container);
  --secondary:var(--md-sys-color-secondary);
  --on-secondary:var(--md-sys-color-on-secondary);
  --secondary-container:var(--md-sys-color-secondary-container);
  --on-secondary-container:var(--md-sys-color-on-secondary-container);
  --tertiary:var(--md-sys-color-tertiary);
  --on-tertiary:var(--md-sys-color-on-tertiary);
  --tertiary-container:var(--md-sys-color-tertiary-container);
  --on-tertiary-container:var(--md-sys-color-on-tertiary-container);
  --error:var(--md-sys-color-error);
  --on-error:var(--md-sys-color-on-error);
  --error-container:var(--md-sys-color-error-container);
  --on-error-container:var(--md-sys-color-on-error-container);
  --surface:var(--md-sys-color-surface);
  --on-surface:var(--md-sys-color-on-surface);
  --s-lowest:var(--md-sys-color-surface-container-lowest);
  --s-low:var(--md-sys-color-surface-container-low);
  --s-cont:var(--md-sys-color-surface-container);
  --s-high:var(--md-sys-color-surface-container-high);
  --s-highest:var(--md-sys-color-surface-container-highest);
  --surface-variant:var(--md-sys-color-surface-variant);
  --on-surface-variant:var(--md-sys-color-on-surface-variant);
  --outline:var(--md-sys-color-outline);
  --outline-variant:var(--md-sys-color-outline-variant);
  --inverse-surface:var(--md-sys-color-inverse-surface);
  --inverse-on-surface:var(--md-sys-color-inverse-on-surface);
  --inverse-primary:var(--md-sys-color-inverse-primary);
  --scrim:var(--md-sys-color-scrim);

  --r-xs:var(--md-sys-shape-corner-extra-small);
  --r-s:var(--md-sys-shape-corner-small);
  --r-m:var(--md-sys-shape-corner-medium);
  --r-l:var(--md-sys-shape-corner-large);
  --r-l-inc:var(--md-sys-shape-corner-large-increased);
  --r-xl:var(--md-sys-shape-corner-extra-large);
  --r-xl-inc:var(--md-sys-shape-corner-extra-large-increased);
  --r-xxl:var(--md-sys-shape-corner-extra-extra-large);
  --r-full:var(--md-sys-shape-corner-full);

  --effects:var(--md-sys-motion-easing-standard);
  --spring-default:var(--md-sys-motion-easing-emphasized);
  --spring-fast:var(--md-sys-motion-easing-spring-fast);
  --spring-slow:var(--md-sys-motion-easing-spring-slow);
  --mono:"Roboto Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}