/* ============================================================
   Material Design 3 — Colors & Type
   Baseline tokens from material-components-android + m3.material.io
   ============================================================ */

/* ---------- Fonts ---------- */
/* Roboto is Material's default type family. Roboto Flex supports the full
   variable axis system; Roboto Mono is the default mono face. */
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&family=Roboto+Flex:opsz,wght@8..144,300..900&family=Roboto+Mono:wght@400;500;700&display=swap");

:root {
  /* ===== M3 BASELINE PALETTE — reference tones ===== */
  /* Purple primary (default Material 3 baseline accent) */
  --md-ref-primary-0:   #000000;
  --md-ref-primary-10:  #21005D;
  --md-ref-primary-20:  #381E72;
  --md-ref-primary-30:  #4F378B;
  --md-ref-primary-40:  #6750A4;
  --md-ref-primary-50:  #7F67BE;
  --md-ref-primary-60:  #9A82DB;
  --md-ref-primary-70:  #B69DF8;
  --md-ref-primary-80:  #D0BCFF;
  --md-ref-primary-90:  #EADDFF;
  --md-ref-primary-95:  #F6EDFF;
  --md-ref-primary-99:  #FFFBFE;
  --md-ref-primary-100: #FFFFFF;

  /* Secondary — softer violet */
  --md-ref-secondary-10: #1D192B;
  --md-ref-secondary-20: #332D41;
  --md-ref-secondary-30: #4A4458;
  --md-ref-secondary-40: #625B71;
  --md-ref-secondary-50: #7A7289;
  --md-ref-secondary-60: #958DA5;
  --md-ref-secondary-70: #B0A7C0;
  --md-ref-secondary-80: #CCC2DC;
  --md-ref-secondary-90: #E8DEF8;
  --md-ref-secondary-95: #F6EDFF;

  /* Tertiary — warm pink */
  --md-ref-tertiary-10: #31111D;
  --md-ref-tertiary-20: #492532;
  --md-ref-tertiary-30: #633B48;
  --md-ref-tertiary-40: #7D5260;
  --md-ref-tertiary-50: #986977;
  --md-ref-tertiary-60: #B58392;
  --md-ref-tertiary-70: #D29DAC;
  --md-ref-tertiary-80: #EFB8C8;
  --md-ref-tertiary-90: #FFD8E4;
  --md-ref-tertiary-95: #FFECF1;

  /* Error */
  --md-ref-error-10: #410E0B;
  --md-ref-error-20: #601410;
  --md-ref-error-30: #8C1D18;
  --md-ref-error-40: #B3261E;
  --md-ref-error-50: #DC362E;
  --md-ref-error-60: #E46962;
  --md-ref-error-70: #EC928E;
  --md-ref-error-80: #F2B8B5;
  --md-ref-error-90: #F9DEDC;
  --md-ref-error-95: #FCEEEE;

  /* Neutral */
  --md-ref-neutral-0:   #000000;
  --md-ref-neutral-4:   #0F0D13;
  --md-ref-neutral-6:   #141218;
  --md-ref-neutral-10:  #1D1B20;
  --md-ref-neutral-12:  #211F26;
  --md-ref-neutral-17:  #2B2930;
  --md-ref-neutral-20:  #322F35;
  --md-ref-neutral-22:  #36343B;
  --md-ref-neutral-24:  #3B383E;
  --md-ref-neutral-30:  #48464C;
  --md-ref-neutral-40:  #605D64;
  --md-ref-neutral-50:  #79767D;
  --md-ref-neutral-60:  #938F96;
  --md-ref-neutral-70:  #AEA9B1;
  --md-ref-neutral-80:  #CAC5CD;
  --md-ref-neutral-87:  #DED8E1;
  --md-ref-neutral-90:  #E6E0E9;
  --md-ref-neutral-92:  #ECE6F0;
  --md-ref-neutral-94:  #F3EDF7;
  --md-ref-neutral-95:  #F5EFF7;
  --md-ref-neutral-96:  #F7F2FA;
  --md-ref-neutral-98:  #FEF7FF;
  --md-ref-neutral-100: #FFFFFF;

  /* Neutral variant — subtle tint for outlines and surface variants */
  --md-ref-neutral-variant-10: #1D1A22;
  --md-ref-neutral-variant-30: #49454F;
  --md-ref-neutral-variant-50: #79747E;
  --md-ref-neutral-variant-60: #938F99;
  --md-ref-neutral-variant-80: #CAC4D0;
  --md-ref-neutral-variant-90: #E7E0EC;

  /* ===== M3 SEMANTIC ROLES — Light (baseline) ===== */
  --md-sys-primary:                 var(--md-ref-primary-40);
  --md-sys-on-primary:              var(--md-ref-primary-100);
  --md-sys-primary-container:       var(--md-ref-primary-90);
  --md-sys-on-primary-container:    var(--md-ref-primary-10);
  --md-sys-inverse-primary:         var(--md-ref-primary-80);

  --md-sys-secondary:               var(--md-ref-secondary-40);
  --md-sys-on-secondary:            #FFFFFF;
  --md-sys-secondary-container:     var(--md-ref-secondary-90);
  --md-sys-on-secondary-container:  var(--md-ref-secondary-10);

  --md-sys-tertiary:                var(--md-ref-tertiary-40);
  --md-sys-on-tertiary:             #FFFFFF;
  --md-sys-tertiary-container:      var(--md-ref-tertiary-90);
  --md-sys-on-tertiary-container:   var(--md-ref-tertiary-10);

  --md-sys-error:                   var(--md-ref-error-40);
  --md-sys-on-error:                #FFFFFF;
  --md-sys-error-container:         var(--md-ref-error-90);
  --md-sys-on-error-container:      var(--md-ref-error-10);

  --md-sys-background:              var(--md-ref-neutral-98);
  --md-sys-on-background:           var(--md-ref-neutral-10);

  --md-sys-surface:                 var(--md-ref-neutral-98);
  --md-sys-on-surface:              var(--md-ref-neutral-10);
  --md-sys-surface-variant:         var(--md-ref-neutral-variant-90);
  --md-sys-on-surface-variant:      var(--md-ref-neutral-variant-30);
  --md-sys-inverse-surface:         var(--md-ref-neutral-20);
  --md-sys-inverse-on-surface:      var(--md-ref-neutral-95);

  --md-sys-surface-dim:             #DED8E0;
  --md-sys-surface-bright:          #FEF7FF;
  --md-sys-surface-container-lowest:#FFFFFF;
  --md-sys-surface-container-low:   var(--md-ref-neutral-96);
  --md-sys-surface-container:       var(--md-ref-neutral-94);
  --md-sys-surface-container-high:  #ECE6F0;
  --md-sys-surface-container-highest: var(--md-ref-neutral-90);

  --md-sys-outline:                 var(--md-ref-neutral-variant-50);
  --md-sys-outline-variant:         var(--md-ref-neutral-variant-80);
  --md-sys-scrim:                   #000000;
  --md-sys-shadow:                  #000000;

  /* ===== TYPE FAMILIES ===== */
  --md-sys-typeface-brand:  "Roboto Flex", "Roboto", system-ui, sans-serif;
  --md-sys-typeface-plain:  "Roboto", system-ui, sans-serif;
  --md-sys-typeface-mono:   "Roboto Mono", ui-monospace, monospace;

  /* ===== TYPE SCALE (M3 baseline) =====
     Sizes kept in px so they read correctly in web contexts.
     Values translated 1 sp = 1 px. */

  /* Display */
  --md-sys-display-large-font:         var(--md-sys-typeface-brand);
  --md-sys-display-large-weight:       400;
  --md-sys-display-large-size:         57px;
  --md-sys-display-large-line:         64px;
  --md-sys-display-large-tracking:     -0.25px;

  --md-sys-display-medium-font:        var(--md-sys-typeface-brand);
  --md-sys-display-medium-weight:      400;
  --md-sys-display-medium-size:        45px;
  --md-sys-display-medium-line:        52px;
  --md-sys-display-medium-tracking:    0;

  --md-sys-display-small-font:         var(--md-sys-typeface-brand);
  --md-sys-display-small-weight:       400;
  --md-sys-display-small-size:         36px;
  --md-sys-display-small-line:         44px;
  --md-sys-display-small-tracking:     0;

  /* Headline */
  --md-sys-headline-large-font:        var(--md-sys-typeface-brand);
  --md-sys-headline-large-weight:      400;
  --md-sys-headline-large-size:        32px;
  --md-sys-headline-large-line:        40px;
  --md-sys-headline-large-tracking:    0;

  --md-sys-headline-medium-font:       var(--md-sys-typeface-brand);
  --md-sys-headline-medium-weight:     400;
  --md-sys-headline-medium-size:       28px;
  --md-sys-headline-medium-line:       36px;
  --md-sys-headline-medium-tracking:   0;

  --md-sys-headline-small-font:        var(--md-sys-typeface-brand);
  --md-sys-headline-small-weight:      400;
  --md-sys-headline-small-size:        24px;
  --md-sys-headline-small-line:        32px;
  --md-sys-headline-small-tracking:    0;

  /* Title */
  --md-sys-title-large-font:           var(--md-sys-typeface-brand);
  --md-sys-title-large-weight:         400;
  --md-sys-title-large-size:           22px;
  --md-sys-title-large-line:           28px;
  --md-sys-title-large-tracking:       0;

  --md-sys-title-medium-font:          var(--md-sys-typeface-plain);
  --md-sys-title-medium-weight:        500;
  --md-sys-title-medium-size:          16px;
  --md-sys-title-medium-line:          24px;
  --md-sys-title-medium-tracking:      0.15px;

  --md-sys-title-small-font:           var(--md-sys-typeface-plain);
  --md-sys-title-small-weight:         500;
  --md-sys-title-small-size:           14px;
  --md-sys-title-small-line:           20px;
  --md-sys-title-small-tracking:       0.1px;

  /* Body */
  --md-sys-body-large-font:            var(--md-sys-typeface-plain);
  --md-sys-body-large-weight:          400;
  --md-sys-body-large-size:            16px;
  --md-sys-body-large-line:            24px;
  --md-sys-body-large-tracking:        0.5px;

  --md-sys-body-medium-font:           var(--md-sys-typeface-plain);
  --md-sys-body-medium-weight:         400;
  --md-sys-body-medium-size:           14px;
  --md-sys-body-medium-line:           20px;
  --md-sys-body-medium-tracking:       0.25px;

  --md-sys-body-small-font:            var(--md-sys-typeface-plain);
  --md-sys-body-small-weight:          400;
  --md-sys-body-small-size:            12px;
  --md-sys-body-small-line:            16px;
  --md-sys-body-small-tracking:        0.4px;

  /* Label */
  --md-sys-label-large-font:           var(--md-sys-typeface-plain);
  --md-sys-label-large-weight:         500;
  --md-sys-label-large-size:           14px;
  --md-sys-label-large-line:           20px;
  --md-sys-label-large-tracking:       0.1px;

  --md-sys-label-medium-font:          var(--md-sys-typeface-plain);
  --md-sys-label-medium-weight:        500;
  --md-sys-label-medium-size:          12px;
  --md-sys-label-medium-line:          16px;
  --md-sys-label-medium-tracking:      0.5px;

  --md-sys-label-small-font:           var(--md-sys-typeface-plain);
  --md-sys-label-small-weight:         500;
  --md-sys-label-small-size:           11px;
  --md-sys-label-small-line:           16px;
  --md-sys-label-small-tracking:       0.5px;

  /* ===== SHAPE (corner radius) ===== */
  --md-sys-shape-none:                 0;
  --md-sys-shape-xs:                   4px;
  --md-sys-shape-sm:                   8px;
  --md-sys-shape-md:                   12px;
  --md-sys-shape-lg:                   16px;
  --md-sys-shape-lg-increased:         20px;
  --md-sys-shape-xl:                   28px;
  --md-sys-shape-xl-increased:         32px;
  --md-sys-shape-xxl:                  48px;
  --md-sys-shape-full:                 9999px;

  /* ===== ELEVATION (dp tokens + box shadows) ===== */
  --md-sys-elevation-0: none;
  --md-sys-elevation-1: 0 1px 2px rgba(0,0,0,.30), 0 1px 3px 1px rgba(0,0,0,.15);
  --md-sys-elevation-2: 0 1px 2px rgba(0,0,0,.30), 0 2px 6px 2px rgba(0,0,0,.15);
  --md-sys-elevation-3: 0 1px 3px rgba(0,0,0,.30), 0 4px 8px 3px rgba(0,0,0,.15);
  --md-sys-elevation-4: 0 2px 3px rgba(0,0,0,.30), 0 6px 10px 4px rgba(0,0,0,.15);
  --md-sys-elevation-5: 0 4px 4px rgba(0,0,0,.30), 0 8px 12px 6px rgba(0,0,0,.15);

  /* ===== MOTION ===== */
  --md-sys-motion-easing-emphasized:        cubic-bezier(.2, 0, 0, 1);
  --md-sys-motion-easing-emphasized-accel:  cubic-bezier(.3, 0, .8, .15);
  --md-sys-motion-easing-emphasized-decel:  cubic-bezier(.05, .7, .1, 1);
  --md-sys-motion-easing-standard:          cubic-bezier(.2, 0, 0, 1);
  --md-sys-motion-easing-standard-accel:    cubic-bezier(.3, 0, 1, 1);
  --md-sys-motion-easing-standard-decel:    cubic-bezier(0, 0, 0, 1);
  --md-sys-motion-easing-linear:            linear;

  --md-sys-motion-duration-short1:          50ms;
  --md-sys-motion-duration-short2:          100ms;
  --md-sys-motion-duration-short3:          150ms;
  --md-sys-motion-duration-short4:          200ms;
  --md-sys-motion-duration-medium1:         250ms;
  --md-sys-motion-duration-medium2:         300ms;
  --md-sys-motion-duration-medium3:         350ms;
  --md-sys-motion-duration-medium4:         400ms;
  --md-sys-motion-duration-long1:           450ms;
  --md-sys-motion-duration-long2:           500ms;
  --md-sys-motion-duration-long3:           550ms;
  --md-sys-motion-duration-long4:           600ms;
  --md-sys-motion-duration-xlong1:          700ms;
  --md-sys-motion-duration-xlong2:          800ms;
  --md-sys-motion-duration-xlong3:          900ms;
  --md-sys-motion-duration-xlong4:          1000ms;

  /* ===== STATE LAYER OPACITIES =====
     Material applies a tinted layer on interactive surfaces to signal state. */
  --md-sys-state-hover:            0.08;
  --md-sys-state-focus:            0.12;
  --md-sys-state-pressed:          0.12;
  --md-sys-state-dragged:          0.16;
  --md-sys-state-disabled-content: 0.38;
  --md-sys-state-disabled-bg:      0.12;
}

/* ===== DARK THEME ===== */
[data-theme="dark"],
:root.dark {
  --md-sys-primary:                 var(--md-ref-primary-80);
  --md-sys-on-primary:              var(--md-ref-primary-20);
  --md-sys-primary-container:       var(--md-ref-primary-30);
  --md-sys-on-primary-container:    var(--md-ref-primary-90);
  --md-sys-inverse-primary:         var(--md-ref-primary-40);

  --md-sys-secondary:               var(--md-ref-secondary-80);
  --md-sys-on-secondary:            var(--md-ref-secondary-20);
  --md-sys-secondary-container:     var(--md-ref-secondary-30);
  --md-sys-on-secondary-container:  var(--md-ref-secondary-90);

  --md-sys-tertiary:                var(--md-ref-tertiary-80);
  --md-sys-on-tertiary:             var(--md-ref-tertiary-20);
  --md-sys-tertiary-container:      var(--md-ref-tertiary-30);
  --md-sys-on-tertiary-container:   var(--md-ref-tertiary-90);

  --md-sys-error:                   var(--md-ref-error-80);
  --md-sys-on-error:                var(--md-ref-error-20);
  --md-sys-error-container:         var(--md-ref-error-30);
  --md-sys-on-error-container:      var(--md-ref-error-90);

  --md-sys-background:              var(--md-ref-neutral-6);
  --md-sys-on-background:           var(--md-ref-neutral-90);

  --md-sys-surface:                 var(--md-ref-neutral-6);
  --md-sys-on-surface:              var(--md-ref-neutral-90);
  --md-sys-surface-variant:         var(--md-ref-neutral-variant-30);
  --md-sys-on-surface-variant:      var(--md-ref-neutral-variant-80);
  --md-sys-inverse-surface:         var(--md-ref-neutral-90);
  --md-sys-inverse-on-surface:      var(--md-ref-neutral-20);

  --md-sys-surface-dim:             var(--md-ref-neutral-6);
  --md-sys-surface-bright:          var(--md-ref-neutral-24);
  --md-sys-surface-container-lowest:var(--md-ref-neutral-4);
  --md-sys-surface-container-low:   var(--md-ref-neutral-10);
  --md-sys-surface-container:       var(--md-ref-neutral-12);
  --md-sys-surface-container-high:  var(--md-ref-neutral-17);
  --md-sys-surface-container-highest: var(--md-ref-neutral-22);

  --md-sys-outline:                 var(--md-ref-neutral-variant-60);
  --md-sys-outline-variant:         var(--md-ref-neutral-variant-30);
}

/* ===== SEMANTIC TYPE HELPER CLASSES ===== */
.md-display-large {
  font-family: var(--md-sys-display-large-font);
  font-weight: var(--md-sys-display-large-weight);
  font-size: var(--md-sys-display-large-size);
  line-height: var(--md-sys-display-large-line);
  letter-spacing: var(--md-sys-display-large-tracking);
}
.md-display-medium {
  font-family: var(--md-sys-display-medium-font);
  font-weight: var(--md-sys-display-medium-weight);
  font-size: var(--md-sys-display-medium-size);
  line-height: var(--md-sys-display-medium-line);
  letter-spacing: var(--md-sys-display-medium-tracking);
}
.md-display-small {
  font-family: var(--md-sys-display-small-font);
  font-weight: var(--md-sys-display-small-weight);
  font-size: var(--md-sys-display-small-size);
  line-height: var(--md-sys-display-small-line);
  letter-spacing: var(--md-sys-display-small-tracking);
}
.md-headline-large {
  font-family: var(--md-sys-headline-large-font);
  font-weight: var(--md-sys-headline-large-weight);
  font-size: var(--md-sys-headline-large-size);
  line-height: var(--md-sys-headline-large-line);
  letter-spacing: var(--md-sys-headline-large-tracking);
}
.md-headline-medium {
  font-family: var(--md-sys-headline-medium-font);
  font-weight: var(--md-sys-headline-medium-weight);
  font-size: var(--md-sys-headline-medium-size);
  line-height: var(--md-sys-headline-medium-line);
  letter-spacing: var(--md-sys-headline-medium-tracking);
}
.md-headline-small {
  font-family: var(--md-sys-headline-small-font);
  font-weight: var(--md-sys-headline-small-weight);
  font-size: var(--md-sys-headline-small-size);
  line-height: var(--md-sys-headline-small-line);
  letter-spacing: var(--md-sys-headline-small-tracking);
}
.md-title-large {
  font-family: var(--md-sys-title-large-font);
  font-weight: var(--md-sys-title-large-weight);
  font-size: var(--md-sys-title-large-size);
  line-height: var(--md-sys-title-large-line);
  letter-spacing: var(--md-sys-title-large-tracking);
}
.md-title-medium {
  font-family: var(--md-sys-title-medium-font);
  font-weight: var(--md-sys-title-medium-weight);
  font-size: var(--md-sys-title-medium-size);
  line-height: var(--md-sys-title-medium-line);
  letter-spacing: var(--md-sys-title-medium-tracking);
}
.md-title-small {
  font-family: var(--md-sys-title-small-font);
  font-weight: var(--md-sys-title-small-weight);
  font-size: var(--md-sys-title-small-size);
  line-height: var(--md-sys-title-small-line);
  letter-spacing: var(--md-sys-title-small-tracking);
}
.md-body-large {
  font-family: var(--md-sys-body-large-font);
  font-weight: var(--md-sys-body-large-weight);
  font-size: var(--md-sys-body-large-size);
  line-height: var(--md-sys-body-large-line);
  letter-spacing: var(--md-sys-body-large-tracking);
}
.md-body-medium {
  font-family: var(--md-sys-body-medium-font);
  font-weight: var(--md-sys-body-medium-weight);
  font-size: var(--md-sys-body-medium-size);
  line-height: var(--md-sys-body-medium-line);
  letter-spacing: var(--md-sys-body-medium-tracking);
}
.md-body-small {
  font-family: var(--md-sys-body-small-font);
  font-weight: var(--md-sys-body-small-weight);
  font-size: var(--md-sys-body-small-size);
  line-height: var(--md-sys-body-small-line);
  letter-spacing: var(--md-sys-body-small-tracking);
}
.md-label-large {
  font-family: var(--md-sys-label-large-font);
  font-weight: var(--md-sys-label-large-weight);
  font-size: var(--md-sys-label-large-size);
  line-height: var(--md-sys-label-large-line);
  letter-spacing: var(--md-sys-label-large-tracking);
}
.md-label-medium {
  font-family: var(--md-sys-label-medium-font);
  font-weight: var(--md-sys-label-medium-weight);
  font-size: var(--md-sys-label-medium-size);
  line-height: var(--md-sys-label-medium-line);
  letter-spacing: var(--md-sys-label-medium-tracking);
}
.md-label-small {
  font-family: var(--md-sys-label-small-font);
  font-weight: var(--md-sys-label-small-weight);
  font-size: var(--md-sys-label-small-size);
  line-height: var(--md-sys-label-small-line);
  letter-spacing: var(--md-sys-label-small-tracking);
}