/* Global CSS sets overflow-y:auto and overflow-x:hidden on body, both of which
   create a scroll container that traps position:sticky. Override so body is
   not a scroll container — the page scrolls via html instead. */
body {
  overflow-x: clip;
  overflow-y: visible;
}

/* ============================================================
   DORMMATE DESIGN SYSTEM — CSS CUSTOM PROPERTIES
   Verbatim from theme.json / theme.ts, adapted to CSS vars.
   Prefixed --dm- to avoid conflicts with portfolio globals.
   ============================================================ */
:root {
  --dm-primary:                   #386641;
  --dm-on-primary:                #FFFFFF;
  --dm-primary-container:         #B9ECBE;
  --dm-on-primary-container:      #002112;

  --dm-secondary:                 #536358;
  --dm-on-secondary:              #FFFFFF;
  --dm-secondary-container:       #D6E9D8;
  --dm-on-secondary-container:    #0F1F16;
  --dm-secondary-fixed-dim:       #BACDBD;

  --dm-tertiary:                  #7E562A;
  --dm-on-tertiary:               #FFFFFF;
  --dm-tertiary-container:        #FFDDB5;
  --dm-on-tertiary-container:     #2C1500;

  --dm-error:                     #BA1A1A;
  --dm-on-error:                  #FFFFFF;
  --dm-error-container:           #FFDAD6;
  --dm-on-error-container:        #410002;

  --dm-background:                #FBFFFB;
  --dm-on-background:             #1C1C1B;
  --dm-surface:                   #F7FFF7;
  --dm-on-surface:                #1C1C1B;
  --dm-on-surface-variant:        #484846;
  --dm-surface-variant:           #E3E7E1;

  --dm-surface-container-lowest:  #FFFFFF;
  --dm-surface-container-low:     #F3F3F1;
  --dm-surface-container:         #E5E5E3;
  --dm-surface-container-high:    #DCDCDA;
  --dm-surface-container-highest: #D1D1CF;

  --dm-outline:                   #787876;
  --dm-outline-variant:           #C8C8C6;

  --dm-shadow-card:     0 2px 8px rgba(0, 0, 0, 0.08);
  --dm-shadow-elevated: 0 4px 16px rgba(0, 0, 0, 0.12);
  --dm-shadow-float:    0 8px 24px rgba(0, 0, 0, 0.25);

  --dm-space-xs:  4px;
  --dm-space-sm:  8px;
  --dm-space-md:  12px;
  --dm-space-lg:  16px;
  --dm-space-xl:  28px;
  --dm-space-xxl: 40px;

}

@media (prefers-color-scheme: dark) {
  :root {
    --dm-primary:                   #9ED0A3;
    --dm-on-primary:                #003921;
    --dm-primary-container:         #1F5134;
    --dm-on-primary-container:      #B9ECBE;

    --dm-secondary:                 #BACDBD;
    --dm-on-secondary:              #25352B;
    --dm-secondary-container:       #3B4B41;
    --dm-on-secondary-container:    #D6E9D8;
    --dm-secondary-fixed-dim:       #BACDBD;

    --dm-tertiary:                  #F0BE8A;
    --dm-on-tertiary:               #482900;
    --dm-tertiary-container:        #F0BE8A;
    --dm-on-tertiary-container:     #482900;

    --dm-error:                     #FFB4AB;
    --dm-on-error:                  #690005;
    --dm-error-container:           #FFB4AB;
    --dm-on-error-container:        #690005;

    --dm-background:                #111111;
    --dm-on-background:             #E5E5E3;
    --dm-surface:                   #111111;
    --dm-on-surface:                #E5E5E3;
    --dm-on-surface-variant:        #C8C8C6;
    --dm-surface-variant:           #474A46;

    --dm-surface-container-lowest:  #000000;
    --dm-surface-container-low:     #1C1C1B;
    --dm-surface-container:         #262625;
    --dm-surface-container-high:    #313130;
    --dm-surface-container-highest: #3C3C3B;

    --dm-outline:                   #929290;
    --dm-outline-variant:           #484846;

    --dm-shadow-card:     0 2px 8px rgba(0, 0, 0, 0.24);
    --dm-shadow-elevated: 0 4px 16px rgba(0, 0, 0, 0.32);
    --dm-shadow-float:    0 8px 24px rgba(0, 0, 0, 0.50);
  }
}

/* ============================================================
   BODY
   ============================================================ */
body {
  background-color: var(--dm-background);
  color: var(--dm-on-background);
  -webkit-font-smoothing: antialiased;
}