/* ── glow — color harmony ── */

:root {
  --bg: #FAF8F5;
  --surface: #F5F2ED;
  --text: #2C2420;
  --text-soft: #6B6058;
  --text-hint: #A0948A;
  --border: #E3DDD6;
  --border-soft: #EDE8E2;
  --accent: #2C2420;
  --white: #FFFFFF;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1A1614;
    --surface: #221E1B;
    --text: #E8E0D6;
    --text-soft: #A0948A;
    --text-hint: #7A7068;
    --border: #3A3430;
    --border-soft: #2E2A26;
    --accent: #E8E0D6;
    --white: #2C2824;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  min-height: 100dvh;
  transition: background .35s ease, color .35s ease;
  -webkit-font-smoothing: antialiased;
}

main {
  max-width: 640px;
  margin: 0 auto;
  padding: 3rem 1.5rem 5rem;
}

/* ── hero ── */

.hero {
  text-align: center;
  padding: 2rem 0 2.5rem;
}

.logo {
  font-size: 2.25rem;
  font-weight: 300;
  letter-spacing: .12em;
  text-transform: lowercase;
  color: var(--text);
  transition: color .35s ease;
}

.tagline {
  font-size: .95rem;
  color: var(--text-hint);
  margin-top: .45rem;
  font-weight: 350;
  letter-spacing: .03em;
  transition: color .35s ease;
}

/* ── input area ── */

.input-area {
  transition: opacity .35s ease;
}

.input-row {
  display: flex;
  justify-content: center;
  gap: .75rem;
  margin-bottom: 1.25rem;
}

.input-method {
  background: transparent;
  border: 1.5px solid var(--border);
  border-radius: 50%;
  width: 3.5rem;
  height: 3.5rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-hint);
  transition: border-color .25s ease, color .25s ease, background .25s ease;
}

.input-method:hover {
  color: var(--text-soft);
  border-color: var(--text-hint);
}

.input-method.active {
  background: var(--text);
  border-color: var(--text);
  color: var(--bg);
}

.input-panel {
  text-align: center;
}

.input-panel.hidden {
  display: none;
}

/* color picker */

.color-picker-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-bottom: .75rem;
}

#skinColor {
  -webkit-appearance: none;
  appearance: none;
  width: 3.5rem;
  height: 3.5rem;
  border: 1.5px solid var(--border);
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
  background: none;
  transition: border-color .25s ease;
}

#skinColor:hover {
  border-color: var(--text-hint);
}

#skinColor::-webkit-color-swatch-wrapper {
  padding: 0;
}

#skinColor::-webkit-color-swatch {
  border: none;
  border-radius: 50%;
}

#skinColor::-moz-color-swatch {
  border: none;
  border-radius: 50%;
}

.analyze-btn {
  background: transparent;
  border: 1.5px solid var(--border);
  border-radius: 50%;
  width: 3.5rem;
  height: 3.5rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-soft);
  transition: border-color .25s ease, color .25s ease, background .25s ease, transform .1s ease;
}

.analyze-btn:hover {
  color: var(--bg);
  background: var(--text);
  border-color: var(--text);
}

.analyze-btn:active {
  transform: scale(.92);
}

.hint {
  font-size: .8rem;
  color: var(--text-hint);
  margin-bottom: 1rem;
  font-weight: 350;
}

/* quick swatches */

.quick-swatches {
  display: grid;
  grid-template-columns: repeat(8, 2rem);
  justify-content: center;
  gap: .5rem;
  margin-top: .75rem;
}

@media (max-width: 480px) {
  .quick-swatches {
    grid-template-columns: repeat(4, 2rem);
  }
}

.quick-swatch {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: border-color .2s ease, transform .15s ease;
}

.quick-swatch:hover {
  border-color: var(--text-soft);
  transform: scale(1.12);
}

.quick-swatch:active {
  transform: scale(.94);
}

/* photo upload */

.photo-dropzone {
  border: 1.5px dashed var(--border);
  border-radius: .75rem;
  padding: 2.5rem 1.5rem;
  cursor: pointer;
  text-align: center;
  transition: border-color .25s ease, background .25s ease;
  color: var(--text-hint);
}

.photo-dropzone:hover {
  border-color: var(--text-hint);
  background: var(--surface);
}

.photo-dropzone p {
  margin-top: .75rem;
  font-size: .95rem;
  font-weight: 380;
}

.photo-dropzone .hint {
  display: block;
  margin-top: .35rem;
}

.photo-preview {
  text-align: center;
}

.photo-preview.hidden {
  display: none;
}

#photoCanvas {
  max-width: 100%;
  max-height: 360px;
  border-radius: .5rem;
  cursor: crosshair;
  border: 1px solid var(--border-soft);
}

.reset-btn {
  background: transparent;
  border: 1.5px solid var(--border);
  color: var(--text-soft);
  font-family: inherit;
  font-size: .8rem;
  padding: .45rem 1rem;
  border-radius: 2rem;
  cursor: pointer;
  margin-top: .75rem;
  transition: border-color .25s ease, color .25s ease;
}

.reset-btn:hover {
  border-color: var(--text-hint);
  color: var(--text);
}

/* ── results ── */

.results {
  margin-top: 2.5rem;
  opacity: 0;
  transition: opacity .45s ease;
}

.results.visible {
  opacity: 1;
}

.results-inner {
  transition: opacity .35s ease;
}

.results.fade .results-inner {
  opacity: 0;
}

/* skin profile */

.skin-profile {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border-soft);
  margin-bottom: 2rem;
}

.skin-swatch {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  flex-shrink: 0;
}

.skin-info {
  flex: 1;
  min-width: 0;
}

.skin-label {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--text-hint);
  margin-bottom: .15rem;
}

.skin-value {
  font-size: 1.05rem;
  font-weight: 450;
  color: var(--text);
  text-transform: capitalize;
}

.skin-undertone {
  font-size: .85rem;
  color: var(--text-soft);
  margin-top: .1rem;
}

.skin-hex {
  font-size: .8rem;
  color: var(--text-hint);
  font-family: "SF Mono", "Fira Code", "Fira Mono", Menlo, Consolas, monospace;
  margin-top: .15rem;
}

/* category tabs */

.cat-tabs {
  display: flex;
  gap: .35rem;
  margin-bottom: 1.75rem;
  flex-wrap: wrap;
}

.cat-tab {
  background: transparent;
  border: 1.5px solid var(--border);
  color: var(--text-soft);
  font-family: inherit;
  font-size: .82rem;
  font-weight: 400;
  padding: .45rem 1.1rem;
  border-radius: 2rem;
  cursor: pointer;
  letter-spacing: .03em;
  text-transform: lowercase;
  transition: border-color .25s ease, color .25s ease, background .25s ease;
}

.cat-tab:hover {
  border-color: var(--text-hint);
  color: var(--text);
}

.cat-tab.active {
  background: var(--text);
  border-color: var(--text);
  color: var(--bg);
}

/* subcategory tabs (for makeup) */

.sub-tabs {
  display: flex;
  gap: .3rem;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}

.sub-tab {
  background: transparent;
  border: none;
  color: var(--text-hint);
  font-family: inherit;
  font-size: .78rem;
  font-weight: 380;
  padding: .25rem .7rem;
  cursor: pointer;
  letter-spacing: .03em;
  text-transform: lowercase;
  transition: color .25s ease;
  border-bottom: 1.5px solid transparent;
}

.sub-tab:hover {
  color: var(--text-soft);
}

.sub-tab.active {
  color: var(--text);
  border-bottom-color: var(--text);
}

/* color grid */

.cat-heading {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text-hint);
  margin-bottom: 1rem;
  font-weight: 450;
}

.color-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 1rem;
}

.color-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .4rem;
  cursor: default;
  transition: opacity .35s ease;
}

.color-dot {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  border: 1.5px solid var(--border-soft);
  transition: transform .2s ease;
}

.color-item:hover .color-dot {
  transform: scale(1.08);
}

.color-name {
  font-size: .7rem;
  color: var(--text-soft);
  text-transform: capitalize;
  text-align: center;
  letter-spacing: .02em;
  line-height: 1.3;
}

.color-hex {
  font-size: .65rem;
  color: var(--text-hint);
  font-family: "SF Mono", "Fira Code", "Fira Mono", Menlo, Consolas, monospace;
}

/* empty state */

.empty-state {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--text-hint);
}

.empty-state p {
  font-size: .9rem;
  font-weight: 350;
  letter-spacing: .03em;
}

/* ── responsive ── */

@media (max-width: 480px) {
  main {
    padding: 2rem 1rem 4rem;
  }

  .logo {
    font-size: 1.8rem;
  }

  .color-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: .75rem;
  }

  .color-dot {
    width: 2.5rem;
    height: 2.5rem;
  }

  .skin-profile {
    gap: .75rem;
  }
}