/* ==========================================================================
   Material Design 3 — System Design Tokens
   Camacho Boyce & Associates
   ========================================================================== */

:root {
  /* ── Color ── */
  --md-primary:            #0D47A1;
  --md-on-primary:         #FFFFFF;
  --md-primary-container:  #D6E4FF;
  --md-on-primary-container: #001C3D;

  --md-secondary:          #B8860B;
  --md-on-secondary:       #FFFFFF;
  --md-secondary-container:#FFF3CD;
  --md-on-secondary-container: #3D2700;

  --md-tertiary:           #1B5E20;
  --md-on-tertiary:        #FFFFFF;
  --md-tertiary-container: #C8E6C9;
  --md-on-tertiary-container: #002108;

  --md-error:              #B3261E;
  --md-on-error:           #FFFFFF;
  --md-error-container:    #F9DEDC;
  --md-on-error-container: #410E0B;

  --md-background:         #F3F6FC;
  --md-on-background:      #1C1B1F;
  --md-surface:            #FEFBFF;
  --md-on-surface:         #1C1B1F;
  --md-surface-variant:    #E7E0EC;
  --md-on-surface-variant: #49454F;

  --md-surface-container-lowest:  #FFFFFF;
  --md-surface-container-low:     #F7F2FA;
  --md-surface-container:         #F3EDF7;
  --md-surface-container-high:    #ECE6F0;
  --md-surface-container-highest: #E6E0E9;

  --md-outline:            #79747E;
  --md-outline-variant:    #CAC4D0;
  --md-inverse-surface:    #313033;
  --md-inverse-on-surface: #F4EFF4;
  --md-inverse-primary:    #ADC6FF;
  --md-scrim:              rgba(0,0,0,0.32);

  /* ── Elevation shadows ── */
  --md-elevation-1: 0 1px 2px rgba(0,0,0,.30), 0 1px 3px 1px rgba(0,0,0,.15);
  --md-elevation-2: 0 1px 2px rgba(0,0,0,.30), 0 2px 6px 2px rgba(0,0,0,.15);
  --md-elevation-3: 0 4px 8px 3px rgba(0,0,0,.15), 0 1px 3px rgba(0,0,0,.30);
  --md-elevation-4: 0 6px 10px 4px rgba(0,0,0,.15), 0 2px 3px rgba(0,0,0,.30);
  --md-elevation-5: 0 8px 12px 6px rgba(0,0,0,.15), 0 4px 4px rgba(0,0,0,.30);

  /* ── Shape (border-radius) ── */
  --md-shape-none:      0px;
  --md-shape-xs:        4px;
  --md-shape-sm:        8px;
  --md-shape-md:        12px;
  --md-shape-lg:        16px;
  --md-shape-xl:        28px;
  --md-shape-full:      9999px;

  /* ── Motion ── */
  --md-duration-short:   200ms;
  --md-duration-medium:  300ms;
  --md-duration-long:    500ms;
  --md-easing-standard:  cubic-bezier(0.2, 0, 0, 1);
  --md-easing-decel:     cubic-bezier(0.05, 0.7, 0.1, 1);
  --md-easing-accel:     cubic-bezier(0.3, 0, 0.8, 0.15);

  /* ── Type scale ── */
  --md-font:             'Roboto', sans-serif;

  --md-display-lg:       57px / 64px var(--md-font);
  --md-display-md:       45px / 52px var(--md-font);
  --md-display-sm:       36px / 44px var(--md-font);

  --md-headline-lg-size: 32px;
  --md-headline-lg-lh:   40px;
  --md-headline-md-size: 28px;
  --md-headline-md-lh:   36px;
  --md-headline-sm-size: 24px;
  --md-headline-sm-lh:   32px;

  --md-title-lg-size:    22px;
  --md-title-lg-lh:      28px;
  --md-title-md-size:    16px;
  --md-title-md-lh:      24px;
  --md-title-sm-size:    14px;
  --md-title-sm-lh:      20px;

  --md-body-lg-size:     16px;
  --md-body-lg-lh:       24px;
  --md-body-md-size:     14px;
  --md-body-md-lh:       20px;
  --md-body-sm-size:     12px;
  --md-body-sm-lh:       16px;

  --md-label-lg-size:    14px;
  --md-label-md-size:    12px;
  --md-label-sm-size:    11px;
}