@property --angle-1 { syntax: "<angle>"; inherits: false; initial-value: -75deg; }
@property --angle-2 { syntax: "<angle>"; inherits: false; initial-value: -45deg; }

:root {
  color-scheme: light;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --v-ease: cubic-bezier(.25, 1, .5, 1);
  --v-time: .4s;
  --blue-night: #071A3A;
  --blue-dk: #0B2A5B;
  --blue: #123C7C;
  --blue-lt: #2F6BFF;
  --rose: #EB668B;
  --rose-lt: #F194AE;
  --rose-dk: #C95777;
  --white: #FFFFFF;
  --ink: #0e1c33;
  --muted: #4d6076;
  --muted2: #6d8098;
  --scene-a: #f2f6fc;
  --scene-b: #e8eef7;
  --scene-c: #dce6f2;
  --line: rgba(18, 60, 124, .12);
  --shadow-ink: 7, 26, 58;
  --glass-hi: rgba(255, 255, 255, .44);
  --glass-lo: rgba(214, 228, 244, .22);
  --glass-edge: rgba(255, 255, 255, .95);
  --glass-inner: rgba(255, 255, 255, 1);
  --field-bg: rgba(255, 255, 255, .38);
  --field-focus: rgba(255, 255, 255, .90);
  --chip-bg: rgba(255, 255, 255, .42);
  --r-lg: 28px;
  --r-md: 22px;
  --r-sm: 16px;
  --pill: 999px;
  --shadow-deep: 0 24px 60px rgba(7, 26, 58, .20);
  --shadow-soft: 0 16px 40px rgba(7, 26, 58, .14);
}

[data-theme="dark"] {
  color-scheme: dark;
  --blue-dk: #d6e2f8;
  --blue: #7fa3e6;
  --blue-lt: #9db9f0;
  --rose: #f194ae;
  --rose-lt: #f5b0c3;
  --rose-dk: #c6798f;
  --scene-a: #101b2c;
  --scene-b: #0d1626;
  --scene-c: #0a111e;
  --ink: #e6edf6;
  --muted: #9fb2c7;
  --muted2: #9fb2c7;
  --chip-bg: rgba(56, 78, 110, .62);
  --line: rgba(157, 184, 218, .20);
  --glass-hi: rgba(46, 64, 90, .55);
  --glass-lo: rgba(24, 36, 54, .45);
  --glass-edge: rgba(157, 184, 218, .35);
  --glass-inner: rgba(190, 212, 238, .25);
  --field-bg: rgba(46, 64, 90, .48);
  --field-focus: rgba(34, 50, 72, .92);
  --shadow-ink: 0, 0, 0;
}