:root {

  --blue: #0095ff;
  --green: #50d436;
  --red: #ff1640;
  --yellow: #ffb400;

  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 28px;

  --transition: 0.3s ease;
}

/* DARK */

html[data-theme="dark"] {

  --background: #050b12;

  --background-secondary: #09121d;

  --card: rgba(9, 18, 29, 0.82);

  --card-solid: #0b1520;

  --border: rgba(255,255,255,.10);

  --text: #f5f8fc;

  --text-muted: #91a0b3;

  --input: rgba(0,0,0,.22);

  --shadow:
    0 25px 70px rgba(0,0,0,.42);
}

/* LIGHT */

html[data-theme="light"] {

  --background: #f3f7fb;

  --background-secondary: #edf3f8;

  --card: rgba(255,255,255,.85);

  --card-solid: #ffffff;

  --border: rgba(15,38,60,.10);

  --text: #102132;

  --text-muted: #6c7d8e;

  --input: #f6f9fc;

  --shadow:
    0 20px 55px rgba(24,54,86,.12);
}