@charset "UTF-8";

:root[data-theme="color-a"] {
    --color-main: orange;
    --color-sub: gold;
    --color-text: #000;
}

:root[data-theme="color-b"] {
    --color-main:  green;
    --color-sub: lightgreen;
    --color-text: #000;
}

:root[data-theme="color-c"] {
    --color-main: navy;
    --color-sub: blue;
    --color-text: #fff;
}


body {
    background-color: var(--color-main);
    color: var(--color-text);
}

p {
    background-color: var(--color-sub);
}

button {
  padding: 12px 32px;
  border: none;
  border-radius: 24px;
  background: linear-gradient(90deg, #ffb6b9 0%, #fae3d9 100%);
  color: #333;
  font-size: 1.1rem;
  font-weight: bold;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
  margin: 8px;
}

button:hover {
  transform: scale(1.07);
  box-shadow: 0 6px 16px rgba(0,0,0,0.15);
  background: linear-gradient(90deg, #fae3d9 0%, #ffb6b9 100%);
}