/* Root variables */
:root {
  --color-bg: #2c2f33;
  --color-panel: #36393f;
  --color-muted: #c9c9c9;
  --color-text: #f5f5f5;
  --color-button: #4f545c;
  --color-button-hover: #4f545c87;
  --color-accent: #ff6f61;
  --color-accent-hover: #ff967e;
  --color-description: #4f545c;
  --align-center: center;
  --max-width: 75rem;
  --radius: 0.75rem;
  --shadow-soft: 0 0.375rem 1.125rem rgba(0, 0, 0, 0.3);

  /* spacing scale */
  --space-xs: 0.5rem;
  --space-s: 0.75rem;
  --space-m: 1rem;
  --space-l: 2rem;
  --space-xl: 2.5rem;
  --space-xxl: 3rem;
  --margin-xs: 1%;
  --margin-s: 2%;
  --margin-m: 3%;
  --margin-l: 4%;
  --margin-xl: 5%;
  --margin-xxl: 10%;
  --full: 100%;

  --fs-s: clamp(0.95rem, 0.9rem + 0.2vw, 0.9rem);
  --fs-m: clamp(1rem, 0.95rem + 0.3vw, 1.1rem);
  --fs-l: clamp(1.25rem, 1.2rem + 0.4vw, 1.4rem);
  --fs-xl: clamp(1.75rem, 1.6rem + 0.6vw, 2rem);
  --btn-padding-y: 0.9em;
  --btn-padding-x: 1.8em;
  --bp-tablet: 55rem;
}

:root.light-theme,
@media (prefers-color-scheme: light) {
  :root {
    --color-bg: #f5f5f5;
    --color-panel: #ffffff;
    --color-muted: #555;
    --color-text: #222;
    --color-button: #ddd;
    --color-button-hover: #ccc;
    --color-accent: #ff6f61;
    --color-accent-hover: #ff967e;
    --color-description: #666;
    --shadow-soft: 0 0.375rem 1.125rem rgba(0, 0, 0, 0.15);
  }
}

:root.dark-theme,
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #2c2f33;
    --color-panel: #36393f;
    --color-muted: #c9c9c9;
    --color-text: #f5f5f5;
    --color-button: #4f545c;
    --color-button-hover: #4f545c87;
    --color-accent: #ff6f61;
    --color-accent-hover: #ff967e;
    --color-description: #4f545c;
    --shadow-soft: 0 0.375rem 1.125rem rgba(0, 0, 0, 0.3);
  }
}