:root {
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  --ground: #f2f3f5;
  --surface: #ffffff;
  --surface-2: #f7f8fa;
  --surface-3: #eceef2;
  --hairline: rgba(18, 38, 66, 0.09);
  --hairline-strong: rgba(18, 38, 66, 0.15);
  --hover: rgba(18, 38, 66, 0.05);
  --hover-strong: rgba(18, 38, 66, 0.08);

  --ink: #0b0d12;
  --text-2: #4a515c;
  --text-3: #646b77;

  --accent: #0a6cdb;
  --accent-ring: rgba(10, 108, 219, 0.28);
  --accent-soft: rgba(10, 108, 219, 0.09);
  --on-accent: #ffffff;
  --success: #1a7f4e;
  --warning: #9a5b00;
  --danger: #c42b1c;
  --danger-soft: rgba(196, 43, 28, 0.07);
  --violet: #5b45c9;
  --violet-soft: rgba(91, 69, 201, 0.08);

  --field: #ffffff;
  --button: #0b0d12;
  --button-hover: #22262f;
  --button-text: #ffffff;
  --thread: rgba(18, 38, 66, 0.14);

  --light-a: rgba(255, 255, 255, 0.95);
  --light-b: #e2e5ea;
  --light-c: #ebe7f1;
  --light-d: #e3ebf2;

  --bar-solid: #f4f5f7;

  /* Liquid Glass: tint (top to bottom), inner rim light, outer hairline, depth, pointer light. Regular glass
     carries text and keeps 4.5:1 over busy content; clear glass is for tracks over the quiet ground. */
  --lg-tint-top: rgba(255, 255, 255, 0.6);
  --lg-tint-bottom: rgba(248, 249, 252, 0.44);
  --lg-clear-top: rgba(255, 255, 255, 0.5);
  --lg-clear-bottom: rgba(255, 255, 255, 0.26);
  --lg-thick-top: rgba(255, 255, 255, 0.9);
  --lg-thick-bottom: rgba(28, 44, 72, 0.1);
  --lg-thick-ring: rgba(255, 255, 255, 0.55);
  --lg-pop-top: rgba(255, 255, 255, 0.88);
  --lg-pop-bottom: rgba(252, 252, 254, 0.8);
  --lg-highlight: rgba(255, 255, 255, 0.95);
  --lg-rim: rgba(255, 255, 255, 0.55);
  --lg-edge: rgba(255, 255, 255, 0.9);
  --lg-edge-soft: rgba(255, 255, 255, 0.35);
  --lg-outline: rgba(18, 38, 66, 0.1);
  --lg-shade: rgba(18, 38, 66, 0.05);
  --lg-shadow: 0 12px 32px -14px rgba(28, 34, 46, 0.26), 0 2px 6px -2px rgba(28, 34, 46, 0.08);
  --lg-glow: rgba(96, 120, 165, 0.16);
  --lg-rim-lit: rgba(72, 96, 140, 0.55);
  --lens-fill: rgba(255, 255, 255, 0.94);
  --lens-shadow: 0 1px 1px rgba(16, 24, 40, 0.06), 0 6px 14px -6px rgba(16, 24, 40, 0.22), inset 0 1px 0 #fff, inset 0 -1px 0 rgba(18, 38, 66, 0.06);
  --edge-fade: rgba(242, 243, 245, 0.85);
  --well: rgba(255, 255, 255, 0.66);

  --shadow-surface: 0 1px 2px rgba(16, 24, 40, 0.05), 0 8px 24px -14px rgba(16, 24, 40, 0.12);
  --shadow-raised: 0 2px 4px rgba(16, 24, 40, 0.06), 0 16px 32px -16px rgba(16, 24, 40, 0.18);
  --shadow-pop: 0 24px 60px -24px rgba(28, 34, 46, 0.32), 0 8px 20px -12px rgba(28, 34, 46, 0.2);
  --shadow-tab: 0 1px 2px rgba(16, 24, 40, 0.08), 0 2px 8px -4px rgba(16, 24, 40, 0.12);
  --scroll-thumb: rgba(18, 38, 66, 0.22);
  --on-danger: #ffffff;
  --success-soft: rgba(26, 127, 78, 0.09);
  --warning-soft: rgba(154, 91, 0, 0.09);
  --veil: color-mix(in srgb, var(--ground) 62%, transparent);
  --radius-surface: 16px;
  --radius-control: 10px;
  --radius-pop: 18px;
  --radius-toolbar: 20px;
}

:root[data-theme="dark"] {
  --ground: #090a0f;
  --surface: #111319;
  --surface-2: #161921;
  --surface-3: #1d2029;
  --hairline: rgba(255, 255, 255, 0.07);
  --hairline-strong: rgba(255, 255, 255, 0.13);
  --hover: rgba(255, 255, 255, 0.05);
  --hover-strong: rgba(255, 255, 255, 0.08);

  --ink: #f2f4f8;
  --text-2: #b4bac4;
  --text-3: #8b929d;

  --accent: #5aa7ff;
  --accent-ring: rgba(90, 167, 255, 0.32);
  --accent-soft: rgba(90, 167, 255, 0.12);
  --on-accent: #0b0d12;
  --success: #4cc38a;
  --warning: #f0b44c;
  --danger: #ff7a6b;
  --danger-soft: rgba(255, 122, 107, 0.08);
  --violet: #a594ff;
  --violet-soft: rgba(165, 148, 255, 0.1);

  --field: rgba(255, 255, 255, 0.04);
  --button: #f2f4f8;
  --button-hover: #ffffff;
  --button-text: #0b0d12;
  --thread: rgba(255, 255, 255, 0.14);

  --light-a: rgba(191, 224, 255, 0.30);
  --light-b: rgba(255, 214, 196, 0.20);
  --light-c: rgba(214, 208, 255, 0.26);
  --light-d: rgba(205, 238, 255, 0.22);

  --bar-solid: #0d0e14;

  --lg-tint-top: rgba(36, 39, 50, 0.58);
  --lg-tint-bottom: rgba(18, 20, 27, 0.46);
  --lg-clear-top: rgba(40, 44, 56, 0.42);
  --lg-clear-bottom: rgba(22, 24, 32, 0.26);
  --lg-thick-top: rgba(255, 255, 255, 0.12);
  --lg-thick-bottom: rgba(0, 0, 0, 0.3);
  --lg-thick-ring: rgba(255, 255, 255, 0.05);
  --lg-pop-top: rgba(34, 37, 48, 0.86);
  --lg-pop-bottom: rgba(22, 24, 32, 0.82);
  --lg-highlight: rgba(255, 255, 255, 0.2);
  --lg-rim: rgba(255, 255, 255, 0.09);
  --lg-edge: rgba(255, 255, 255, 0.26);
  --lg-edge-soft: rgba(255, 255, 255, 0.08);
  --lg-outline: rgba(0, 0, 0, 0.45);
  --lg-shade: rgba(0, 0, 0, 0.22);
  --lg-shadow: 0 18px 44px -18px rgba(0, 0, 0, 0.75), 0 2px 8px -2px rgba(0, 0, 0, 0.4);
  --lg-glow: rgba(191, 224, 255, 0.1);
  --lg-rim-lit: rgba(205, 225, 255, 0.5);
  --lens-fill: rgba(255, 255, 255, 0.13);
  --lens-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 0 0 1px rgba(255, 255, 255, 0.07), 0 6px 14px -6px rgba(0, 0, 0, 0.6);
  --edge-fade: rgba(9, 10, 15, 0.85);
  --well: rgba(255, 255, 255, 0.05);

  --shadow-surface: inset 0 0 0 1px var(--hairline);
  --shadow-raised: inset 0 0 0 1px var(--hairline-strong), 0 16px 32px -16px rgba(0, 0, 0, 0.6);
  --shadow-pop: inset 0 0 0 1px rgba(255, 255, 255, 0.06), 0 24px 60px -20px rgba(0, 0, 0, 0.75);
  --shadow-tab: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  --scroll-thumb: rgba(255, 255, 255, 0.2);
  --on-danger: #0b0d12;
  --success-soft: rgba(76, 195, 138, 0.12);
  --warning-soft: rgba(240, 180, 76, 0.12);
}