/* Root variables */
:root {
  /* Colors */
  --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;

  /* Layout & alignment */
  --align-center: center;
  --max-width: 75rem;
  --container-max-width: 70rem;
  --full: 100%;
  --radius: 0.75rem;
  --shadow-soft: 0 0.375rem 1.125rem rgba(0, 0, 0, 0.3);
  --card-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.2);
  --btn-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.2);
  --btn-shadow-hover: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.25);

  /* Spacing scale */
  --space-xs: 0.5rem;
  --space-s: 0.75rem;
  --space-m: 1rem;
  --space-l: 2rem;
  --space-xl: 2.5rem;
  --space-xxl: 3rem;

  --padding-xs: 0.5rem;
  --padding-s: 0.75rem;
  --padding-m: 1rem;
  --padding-l: 2rem;
  --padding-xl: 2.5rem;

  --gap-xs: 0.5rem;
  --gap-s: 0.75rem;
  --gap-m: 1rem;
  --gap-l: 2rem;
  --gap-xl: 2.5rem;

  --margin-xs: 1%;
  --margin-s: 2%;
  --margin-m: 3%;
  --margin-l: 4%;
  --margin-xl: 5%;
  --margin-xxl: 10%;

  /* Typography */
  --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);

  --lh-s: 1.2;
  --lh-m: 1.5;
  --lh-l: 1.75;

  --ls-s: 0.5px;
  --ls-m: 1px;

  --fw-light: 300;
  --fw-normal: 400;
  --fw-bold: 600;

  /* Buttons */
  --btn-padding-y: 0.9em;
  --btn-padding-x: 1.8em;
  --btn-radius: var(--radius);
  --btn-transition: 0.3s;

  /* Cards & Panels */
  --card-padding: var(--space-l);
  --card-margin: var(--space-m);

  /* Media queries / breakpoints */
  --bp-mobile: 40rem;
  --bp-tablet: 55rem;
  --bp-desktop: 75rem;
  --bp-large: 90rem;

  /* Z-index */
  --z-modal: 1000;
  --z-dropdown: 900;
  --z-tooltip: 1100;

  /* Border widths */
  --border-thin: 1px;
  --border-medium: 2px;
  --border-thick: 3px;

  /* Opacity */
  --opacity-low: 0.3;
  --opacity-medium: 0.6;
  --opacity-high: 0.9;

  /* Transition durations */
  --transition-fast: 0.2s;
  --transition-medium: 0.3s;
  --transition-slow: 0.5s;
}

/* Light theme */
: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);
  }
}

/* Dark theme */
: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);
  }
}