/* ==========================================================================
   Material 3 Expressive — Design Tokens
   Source colour: coral  #FF5A36   (hue ≈ 20°)
   Tonal palettes below are the full 0–100 ramps; semantic roles are mapped
   from them in the [data-theme] blocks.
   ========================================================================== */

:root {
  /* ---- Tonal palettes -------------------------------------------------- */

  /* Primary — coral */
  --p-0:   #000000;
  --p-10:  #470e00;
  --p-20:  #6e1a00;
  --p-30:  #97290a;
  --p-40:  #be3c18;
  --p-50:  #e4522d;
  --p-60:  #ff6b45;
  --p-70:  #ff8a66;
  --p-80:  #ffb59f;
  --p-90:  #ffdbd1;
  --p-95:  #ffede7;
  --p-99:  #fffbff;
  --p-100: #ffffff;

  /* Secondary — desaturated warm clay */
  --s-0:   #000000;
  --s-10:  #2c150d;
  --s-20:  #442a21;
  --s-30:  #5d4036;
  --s-40:  #77574d;
  --s-50:  #916f64;
  --s-60:  #ad887d;
  --s-70:  #c9a296;
  --s-80:  #e7bdb0;
  --s-90:  #ffdbd0;
  --s-95:  #ffede7;
  --s-99:  #fffbff;
  --s-100: #ffffff;

  /* Tertiary — analogous golden olive */
  --t-0:   #000000;
  --t-10:  #211b05;
  --t-20:  #373019;
  --t-30:  #4e462d;
  --t-40:  #665d43;
  --t-50:  #7f765a;
  --t-60:  #9a9072;
  --t-70:  #b5ab8b;
  --t-80:  #d1c6a5;
  --t-90:  #eee2bf;
  --t-95:  #fcf0d3;
  --t-99:  #fffbff;
  --t-100: #ffffff;

  /* Neutral — warm grey */
  --n-0:   #000000;
  --n-4:   #0f0805;
  --n-6:   #140c0b;
  --n-10:  #1b1110;
  --n-12:  #201a18;
  --n-17:  #2a2320;
  --n-20:  #322b28;
  --n-22:  #362d2b;
  --n-24:  #3b322f;
  --n-30:  #4d4340;
  --n-40:  #665a57;
  --n-50:  #7f7370;
  --n-60:  #998d8a;
  --n-70:  #b5a9a5;
  --n-80:  #d0c4c0;
  --n-87:  #e5d9d5;
  --n-90:  #ede0dc;
  --n-92:  #f6e6e1;
  --n-94:  #fcebe7;
  --n-95:  #ffede7;
  --n-96:  #fff1ed;
  --n-98:  #fff8f6;
  --n-100: #ffffff;

  /* Neutral variant */
  --nv-10:  #241916;
  --nv-20:  #3a2c28;
  --nv-30:  #52423e;
  --nv-40:  #6b5954;
  --nv-50:  #85716d;
  --nv-60:  #a08c87;
  --nv-70:  #bca7a1;
  --nv-80:  #d8c2bc;
  --nv-90:  #f5ded8;

  /* Error */
  --e-10: #410002;
  --e-20: #690005;
  --e-30: #93000a;
  --e-40: #ba1a1a;
  --e-80: #ffb4ab;
  --e-90: #ffdad6;

  /* ---- Shape scale ----------------------------------------------------- */
  --shape-none:          0px;
  --shape-xs:            4px;
  --shape-sm:            8px;
  --shape-md:            12px;
  --shape-lg:            16px;
  --shape-lg-increased:  20px;
  --shape-xl:            28px;
  --shape-xl-increased:  32px;
  --shape-xxl:           48px;
  --shape-full:          999px;

  /* ---- Motion: easing -------------------------------------------------- */
  --ease-standard:               cubic-bezier(0.2, 0, 0, 1);
  --ease-standard-decelerate:    cubic-bezier(0, 0, 0, 1);
  --ease-standard-accelerate:    cubic-bezier(0.3, 0, 1, 1);
  --ease-emphasized:             cubic-bezier(0.2, 0, 0, 1);
  --ease-emphasized-decelerate:  cubic-bezier(0.05, 0.7, 0.1, 1);
  --ease-emphasized-accelerate:  cubic-bezier(0.3, 0, 0.8, 0.15);
  /* Expressive springs — the overshoot is the whole point */
  --spring-fast:     cubic-bezier(0.42, 1.67, 0.21, 0.9);
  --spring-default:  cubic-bezier(0.38, 1.21, 0.22, 1);
  --spring-slow:     cubic-bezier(0.27, 1.06, 0.18, 1);
  --spring-bouncy:   cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ---- Motion: duration ------------------------------------------------ */
  --dur-short-1:  50ms;
  --dur-short-2:  100ms;
  --dur-short-3:  150ms;
  --dur-short-4:  200ms;
  --dur-medium-1: 250ms;
  --dur-medium-2: 300ms;
  --dur-medium-3: 350ms;
  --dur-medium-4: 400ms;
  --dur-long-1:   450ms;
  --dur-long-2:   500ms;
  --dur-long-3:   550ms;
  --dur-long-4:   600ms;
  --dur-xlong-1:  700ms;
  --dur-xlong-2:  800ms;

  /* ---- State layer opacities ------------------------------------------ */
  --state-hover:    0.08;
  --state-focus:    0.10;
  --state-pressed:  0.10;
  --state-dragged:  0.16;

  /* ---- Typography ------------------------------------------------------ */
  /* Google Sans Flex — the Material 3 Expressive brand typeface.
     Axes: wght 1–1000, wdth 25–151, opsz 6–144, GRAD 0–100, ROND 0–100. */
  --font-brand: "Google Sans Flex", "Google Sans", "Roboto Flex", "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-plain: "Google Sans Flex", "Google Sans", "Roboto Flex", "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Expressive raises the ceiling on display sizes and tightens tracking. */
  --type-display-lg:      clamp(3.5rem, 9vw, 7rem);
  --type-display-md:      clamp(2.75rem, 6vw, 4rem);
  --type-display-sm:      clamp(2.25rem, 4.5vw, 3rem);
  --type-headline-lg:     clamp(2rem, 3.6vw, 2.5rem);
  --type-headline-md:     clamp(1.75rem, 3vw, 2rem);
  --type-headline-sm:     1.5rem;
  --type-title-lg:        1.375rem;
  --type-title-md:        1rem;
  --type-title-sm:        0.875rem;
  --type-body-lg:         1rem;
  --type-body-md:         0.875rem;
  --type-body-sm:         0.75rem;
  --type-label-lg:        0.875rem;
  --type-label-md:        0.75rem;
  --type-label-sm:        0.6875rem;
}

/* ==========================================================================
   Semantic colour roles
   ========================================================================== */

:root,
[data-theme="light"] {
  color-scheme: light;

  --primary:                  var(--p-40);
  --on-primary:               var(--p-100);
  --primary-container:        var(--p-90);
  --on-primary-container:     var(--p-10);
  --primary-fixed:            var(--p-90);
  --primary-fixed-dim:        var(--p-80);
  --on-primary-fixed:         var(--p-10);

  --secondary:                var(--s-40);
  --on-secondary:             var(--s-100);
  --secondary-container:      var(--s-90);
  --on-secondary-container:   var(--s-10);

  --tertiary:                 var(--t-40);
  --on-tertiary:              var(--t-100);
  --tertiary-container:       var(--t-90);
  --on-tertiary-container:    var(--t-10);

  --error:                    var(--e-40);
  --on-error:                 #ffffff;
  --error-container:          var(--e-90);
  --on-error-container:       var(--e-10);

  --background:               var(--n-98);
  --on-background:            var(--n-10);

  --surface:                  var(--n-98);
  --on-surface:               var(--n-10);
  --surface-dim:              var(--n-87);
  --surface-bright:           var(--n-98);
  --surface-container-lowest: var(--n-100);
  --surface-container-low:    var(--n-96);
  --surface-container:        var(--n-94);
  --surface-container-high:   var(--n-92);
  --surface-container-highest:var(--n-90);
  --surface-variant:          var(--nv-90);
  --on-surface-variant:       var(--nv-30);

  --outline:                  var(--nv-50);
  --outline-variant:          var(--nv-80);

  --inverse-surface:          var(--n-20);
  --inverse-on-surface:       var(--n-95);
  --inverse-primary:          var(--p-80);

  --scrim:                    var(--n-0);
  --shadow:                   var(--n-0);

  /* Elevation — M3 uses tint + shadow together */
  --elev-0: none;
  --elev-1: 0 1px 2px rgb(0 0 0 / 0.28), 0 1px 3px 1px rgb(0 0 0 / 0.13);
  --elev-2: 0 1px 2px rgb(0 0 0 / 0.28), 0 2px 6px 2px rgb(0 0 0 / 0.13);
  --elev-3: 0 4px 8px 3px rgb(0 0 0 / 0.13), 0 1px 3px rgb(0 0 0 / 0.28);
  --elev-4: 0 6px 10px 4px rgb(0 0 0 / 0.13), 0 2px 3px rgb(0 0 0 / 0.28);
  --elev-5: 0 8px 12px 6px rgb(0 0 0 / 0.13), 0 4px 4px rgb(0 0 0 / 0.28);
}

[data-theme="dark"] {
  color-scheme: dark;

  --primary:                  var(--p-80);
  --on-primary:               var(--p-20);
  --primary-container:        var(--p-30);
  --on-primary-container:     var(--p-90);
  --primary-fixed:            var(--p-90);
  --primary-fixed-dim:        var(--p-80);
  --on-primary-fixed:         var(--p-10);

  --secondary:                var(--s-80);
  --on-secondary:             var(--s-20);
  --secondary-container:      var(--s-30);
  --on-secondary-container:   var(--s-90);

  --tertiary:                 var(--t-80);
  --on-tertiary:              var(--t-20);
  --tertiary-container:       var(--t-30);
  --on-tertiary-container:    var(--t-90);

  --error:                    var(--e-80);
  --on-error:                 var(--e-20);
  --error-container:          var(--e-30);
  --on-error-container:       var(--e-90);

  --background:               var(--n-6);
  --on-background:            var(--n-90);

  --surface:                  var(--n-6);
  --on-surface:               var(--n-90);
  --surface-dim:              var(--n-6);
  --surface-bright:           var(--n-24);
  --surface-container-lowest: var(--n-4);
  --surface-container-low:    var(--n-10);
  --surface-container:        var(--n-12);
  --surface-container-high:   var(--n-17);
  --surface-container-highest:var(--n-22);
  --surface-variant:          var(--nv-30);
  --on-surface-variant:       var(--nv-80);

  --outline:                  var(--nv-60);
  --outline-variant:          var(--nv-30);

  --inverse-surface:          var(--n-90);
  --inverse-on-surface:       var(--n-20);
  --inverse-primary:          var(--p-40);

  --scrim:                    var(--n-0);
  --shadow:                   var(--n-0);

  --elev-1: 0 1px 2px rgb(0 0 0 / 0.4), 0 1px 3px 1px rgb(0 0 0 / 0.22);
  --elev-2: 0 1px 2px rgb(0 0 0 / 0.4), 0 2px 6px 2px rgb(0 0 0 / 0.22);
  --elev-3: 0 4px 8px 3px rgb(0 0 0 / 0.22), 0 1px 3px rgb(0 0 0 / 0.4);
  --elev-4: 0 6px 10px 4px rgb(0 0 0 / 0.22), 0 2px 3px rgb(0 0 0 / 0.4);
  --elev-5: 0 8px 12px 6px rgb(0 0 0 / 0.22), 0 4px 4px rgb(0 0 0 / 0.4);
}