:root {
  --font-family: sans-serif;
  --font-weight: 400;
  --font-size: 1rem;
  --line-height: 1.5;
  --dark-primary-color: #ff8544;
  --dark-primary-color-text: #000;
  --dark-primary-color-active: #ffab70;
  --dark-secondary-color: #30e28c;
  --dark-secondary-color-text: #000;
  --dark-bg: #171a18;
  --dark-fg: #30443d;
  --dark-text: #d8d5d2;
  --dark-header-text: #f7fafc;
  --dark-input: #40584d;
  --dark-input-text: #fff;
  --dark-input-border: #80a48d;
  --dark-button: #ff8544;
  --dark-button-border: #ff8544;
  --dark-button-text: #1a202c;
  --dark-link: #ff8544;
  --light-primary-color: #ff8544;
  --light-primary-color-text: #171a18;
  --light-primary-color-active: #e6743a;
  --light-secondary-color: #066;
  --light-secondary-color-text: #fff;
  --light-bg: #e7ebe8;
  --light-fg: #fff;
  --light-text: #171a18;
  --light-header-text: #1a202c;
  --light-input: #f8fdfb;
  --light-input-text: #050505;
  --light-input-border: #d0dbd4;
  --light-button: #ff8544;
  --light-button-border: #ff8544;
  --light-button-text: #000;
  --light-link: #ff8544;
  --success-color: #48bb78;
  --warning-color: #ed8936;
  --error-color: #f56565;
  --border-radius: 12px;
  --border-width: 1px;
  --padding-t: 8px;
  --padding-r: 8px;
  --padding-b: 8px;
  --padding-l: 8px;
  --padding-ratio2: 1.5;
  --padding-ratio3: 2.5;
  --padding: var(--padding-t) var(--padding-r) var(--padding-b) var(--padding-l);
  --padding-input: var(--padding-t) calc(var(--padding-r) * var(--padding-ratio2)) var(--padding-b) calc(var(--padding-l) * var(--padding-ratio2));
  --margin-t: 12px;
  --margin-r: 12px;
  --margin-b: 12px;
  --margin-l: 12px;
  --margin-ratio2: 2.5;
  --margin-ratio3: 4.25;
  --margin: var(--margin-t) var(--margin-r) var(--margin-b) var(--margin-l);
  --grid-min-width: 250px;
  --gap: 1px;
  --gap-ratio2: 8;
  --gap-ratio3: 12;
  --shadow: 0 1px 3px 0 #788d8344, 0 1px 2px 0 #788d8344;
  --drawer-width: 300px;
}

:root {
  --primary-color: var(--light-primary-color);
  --primary-color-text: var(--light-primary-color-text);
  --primary-color-active: var(--light-primary-color-active);
  --secondary-color: var(--light-secondary-color);
  --secondary-color-text: var(--light-secondary-color-text);
  --color-bg: var(--light-bg);
  --color-fg: var(--light-fg);
  --color-text: var(--light-text);
  --color-header-text: var(--light-header-text);
  --color-input: var(--light-input);
  --color-input-text: var(--light-input-text);
  --color-input-border: var(--light-input-border);
  --color-button: var(--light-button);
  --color-button-border: var(--light-button-border);
  --color-button-text: var(--light-button-text);
  --link-color: var(--light-link);
}

@media (prefers-color-scheme: dark) {
  :root {
    --primary-color: var(--dark-primary-color);
    --primary-color-text: var(--dark-primary-color-text);
    --primary-color-active: var(--dark-primary-color-active);
    --secondary-color: var(--dark-secondary-color);
    --secondary-color-text: var(--dark-secondary-color-text);
    --color-bg: var(--dark-bg);
    --color-fg: var(--dark-fg);
    --color-text: var(--dark-text);
    --color-header-text: var(--dark-header-text);
    --color-input: var(--dark-input);
    --color-input-text: var(--dark-input-text);
    --color-input-border: var(--dark-input-border);
    --color-button: var(--dark-button);
    --color-button-border: var(--dark-button-border);
    --color-button-text: var(--dark-button-text);
    --link-color: var(--dark-link);
  }

  input::placeholder {
    color: #fff8;
  }
}