/* ============================================================
   Material 3 — design tokens
   Reference: https://m3.material.io/styles

   The scheme is built from a fully neutral tonal palette: every colour role
   resolves to a grey, so the interface carries no hue of its own and the paper
   in the viewport is the only thing with colour.

   Tones used (Material's neutral palette):
   N100 #ffffff  N99 #fcfcfc  N98 #fafafa  N96 #f4f4f4  N95 #f1f1f1
   N94  #eeeeee  N92 #e8e8e8  N90 #e2e2e2  N87 #dadada  N80 #c6c6c6
   N70  #ababab  N60 #919191  N50 #767676  N40 #5e5e5e  N30 #474747
   N24  #383838  N22 #343434  N20 #303030  N17 #2a2a2a  N12 #1f1f1f
   N10  #1b1b1b  N6  #131313  N4  #0e0e0e
   ============================================================ */

:root {
  /* ---- Color: light scheme ---- */
  --md-sys-color-primary: #474747;
  --md-sys-color-on-primary: #ffffff;
  --md-sys-color-primary-container: #d6d6d6;
  --md-sys-color-on-primary-container: #1b1b1b;
  --md-sys-color-secondary: #5e5e5e;
  --md-sys-color-on-secondary: #ffffff;
  --md-sys-color-secondary-container: #e0e0e0;
  --md-sys-color-on-secondary-container: #1f1f1f;
  --md-sys-color-tertiary: #5e5e5e;
  --md-sys-color-on-tertiary: #ffffff;
  --md-sys-color-tertiary-container: #eeeeee;
  --md-sys-color-on-tertiary-container: #1f1f1f;

  /* Destructive actions read as emphasis, not as a hue. */
  --md-sys-color-error: #303030;
  --md-sys-color-on-error: #ffffff;
  --md-sys-color-error-container: #303030;
  --md-sys-color-on-error-container: #ffffff;

  --md-sys-color-surface: #fcfcfc;
  --md-sys-color-on-surface: #1b1b1b;
  --md-sys-color-surface-variant: #e2e2e2;
  --md-sys-color-on-surface-variant: #474747;
  --md-sys-color-surface-dim: #dadada;
  --md-sys-color-surface-bright: #fcfcfc;
  --md-sys-color-surface-container-lowest: #ffffff;
  --md-sys-color-surface-container-low: #f7f7f7;
  --md-sys-color-surface-container: #f2f2f2;
  --md-sys-color-surface-container-high: #ececec;
  --md-sys-color-surface-container-highest: #e6e6e6;

  --md-sys-color-outline: #767676;
  --md-sys-color-outline-variant: #c9c9c9;
  --md-sys-color-inverse-surface: #303030;
  --md-sys-color-inverse-on-surface: #f4f4f4;
  --md-sys-color-inverse-primary: #c6c6c6;
  --md-sys-color-shadow: #000000;
  --md-sys-color-scrim: #000000;

  /* viewport backdrop (studio sweep) */
  --app-studio-top: #f5f5f5;
  --app-studio-bottom: #d8d8d8;

  /* ---- Shape ---- */
  --md-sys-shape-corner-none: 0px;
  --md-sys-shape-corner-xs: 4px;
  --md-sys-shape-corner-s: 8px;
  --md-sys-shape-corner-m: 12px;
  --md-sys-shape-corner-l: 16px;
  --md-sys-shape-corner-xl: 28px;
  --md-sys-shape-corner-full: 9999px;

  /* ---- Elevation ----
     Deliberately flat: surfaces are separated by tone and hairlines rather
     than by drop shadows. The only shadow in the app is the one the paper
     casts in the 3D viewport. */
  --md-sys-elevation-1: none;
  --md-sys-elevation-2: none;
  --md-sys-elevation-3: none;
  --md-sys-elevation-4: none;
  --md-sys-elevation-5: none;

  /* Hairline used where a floating surface needs an edge instead. */
  --app-hairline: inset 0 0 0 1px var(--md-sys-color-outline-variant);

  /* ---- Motion ---- */
  --md-sys-motion-standard: cubic-bezier(0.2, 0, 0, 1);
  --md-sys-motion-emphasized: cubic-bezier(0.2, 0, 0, 1);
  --md-sys-motion-emphasized-decel: cubic-bezier(0.05, 0.7, 0.1, 1);
  --md-sys-motion-duration-short: 150ms;
  --md-sys-motion-duration-medium: 250ms;
  --md-sys-motion-duration-long: 400ms;

  /* ---- State layer opacities ---- */
  --md-sys-state-hover: 0.08;
  --md-sys-state-focus: 0.12;
  --md-sys-state-pressed: 0.12;
  --md-sys-state-dragged: 0.16;

  /* ---- Typography ---- */
  --md-sys-typescale-plain-font: "Roboto", "Segoe UI", system-ui, -apple-system, sans-serif;
  --md-sys-typescale-brand-font: "Roboto", "Segoe UI", system-ui, -apple-system, sans-serif;
}

:root[data-theme="dark"] {
  --md-sys-color-primary: #c6c6c6;
  --md-sys-color-on-primary: #303030;
  --md-sys-color-primary-container: #4a4a4a;
  --md-sys-color-on-primary-container: #e6e6e6;
  --md-sys-color-secondary: #c6c6c6;
  --md-sys-color-on-secondary: #303030;
  --md-sys-color-secondary-container: #3b3b3b;
  --md-sys-color-on-secondary-container: #e2e2e2;
  --md-sys-color-tertiary: #c6c6c6;
  --md-sys-color-on-tertiary: #303030;
  --md-sys-color-tertiary-container: #343434;
  --md-sys-color-on-tertiary-container: #e2e2e2;

  --md-sys-color-error: #e2e2e2;
  --md-sys-color-on-error: #1b1b1b;
  --md-sys-color-error-container: #e2e2e2;
  --md-sys-color-on-error-container: #1b1b1b;

  --md-sys-color-surface: #131313;
  --md-sys-color-on-surface: #e2e2e2;
  --md-sys-color-surface-variant: #474747;
  --md-sys-color-on-surface-variant: #c6c6c6;
  --md-sys-color-surface-dim: #131313;
  --md-sys-color-surface-bright: #383838;
  --md-sys-color-surface-container-lowest: #0e0e0e;
  --md-sys-color-surface-container-low: #1b1b1b;
  --md-sys-color-surface-container: #1f1f1f;
  --md-sys-color-surface-container-high: #2a2a2a;
  --md-sys-color-surface-container-highest: #353535;

  --md-sys-color-outline: #919191;
  --md-sys-color-outline-variant: #474747;
  --md-sys-color-inverse-surface: #e2e2e2;
  --md-sys-color-inverse-on-surface: #303030;
  --md-sys-color-inverse-primary: #5e5e5e;

  --app-studio-top: #2b2b2b;
  --app-studio-bottom: #101010;
}

/* ---- Type scale utility classes ---- */
.md-display-small { font: 400 36px/44px var(--md-sys-typescale-brand-font); letter-spacing: 0; }
.md-headline-small { font: 400 24px/32px var(--md-sys-typescale-brand-font); letter-spacing: 0; }
.md-title-large { font: 400 22px/28px var(--md-sys-typescale-brand-font); letter-spacing: 0; }
.md-title-medium { font: 500 16px/24px var(--md-sys-typescale-plain-font); letter-spacing: 0.15px; }
.md-title-small { font: 500 14px/20px var(--md-sys-typescale-plain-font); letter-spacing: 0.1px; }
.md-body-large { font: 400 16px/24px var(--md-sys-typescale-plain-font); letter-spacing: 0.5px; }
.md-body-medium { font: 400 14px/20px var(--md-sys-typescale-plain-font); letter-spacing: 0.25px; }
.md-body-small { font: 400 12px/16px var(--md-sys-typescale-plain-font); letter-spacing: 0.4px; }
.md-label-large { font: 500 14px/20px var(--md-sys-typescale-plain-font); letter-spacing: 0.1px; }
.md-label-medium { font: 500 12px/16px var(--md-sys-typescale-plain-font); letter-spacing: 0.5px; }
.md-label-small { font: 500 11px/16px var(--md-sys-typescale-plain-font); letter-spacing: 0.5px; }