/* styles.css */

/* — CSS Variables / Semantic Tokens — */
:root {
  /* Core UI colors */
  --color-bg:           #FFFFFF; /* gray-100 */
  --color-text:         #222222; /* gray-800 */
  --color-card-bg:      #F7F7F7;
  --color-border:       #DEDEDE; /* gray-200 */
  --color-focus:        #222222; /* Airbnb coral */
  --focus-ring:         #673DE666;

  /* Semantic Roles (will be set by JS) */
  --color-primary:      #000000;
  --on-primary:         #FFFFFF;
  --color-secondary:    #000000;
  --on-secondary:       #FFFFFF;
  --color-neutral:      #000000;
  --on-neutral:         #FFFFFF;
}

/* — Base typography & reset — */
html, body {
  margin: 0; padding: 0;
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 16px; line-height: 1.5;
  background-color: var(--color-bg);
  color:            var(--color-text);
}

/* — Card container — */
.tints-card {
  background-color: var(--color-card-bg);
  border-radius:    16px;
  padding:          48px;
  margin-bottom:    96px;
}
@media (min-width: 640px) {
  .tints-card {
    padding:       2rem;
    margin-bottom: 2rem;
  }
}

/* — Header row inside card — */
.tints-card-header {
  display:     flex;
  flex-wrap:   wrap;
  gap:         1rem;
  align-items: center;
}
@media (min-width: 640px) {
  .tints-card-header {
    flex-wrap: nowrap;
  }
}

/* — Inputs & selects — */
.color-picker {
  width: 24px;
  background-color: transparent;
}
.tints-input-label {
  display: block;
  font-size: 16px;
  font-weight: 500;
  padding-bottom: 8px;
}
.tints-input {
  border:          1px solid var(--color-border);
  border-radius:   8px;            /* rounded-lg */
  padding:         0px 12px;
  font-size:       16px;          /* text-sm */
  width:           100%;
  height:          48px;
  transition:      border-color .15s, box-shadow .15s;
  background-color: var(--color-bg);
}
.tints-input:focus {
  outline: none;
  box-shadow:  inset  0 0 0 2px var(--color-focus);
}
.tints-input.w-auto {
  width: auto;
}
/* custom arrow for selects */
.tints-input.select {
  appearance:     none;
  padding-right:  2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='currentColor' stroke-width='4'%3E%3Cpath d='M28 12 16.7 23.3a1 1 0 0 1-1.4 0L4 12'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 16px 16px;
  display: inline-block;
  background-position: right 1rem center;
}

.tints-input.hexSelect {
  box-sizing: content-box;
  background-image: none;
}

.tints-input:disabled, .tints-input-label:disabled {
  background-color: var(--color-card-bg);
  color: #22222266;
  background-image: none;
}

/* — Tweaks grid — */
.tints-tweaks {
  display:          grid;
  grid-template-columns: repeat(2, 1fr);
  gap:              8px;
  margin-top:       16px;
}
@media (min-width: 640px) {
  .tints-tweaks {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* — Swatches panel: mimic Tints.dev grid — */
.swatches-panel {
  display:          grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:              8px;
}
@media (min-width: 640px) {
  .swatches-panel {
    grid-template-columns: repeat(11, minmax(0, 1fr));
  }
}

/* — Individual swatch card — */
.tints-swatch {
  border-radius:    8px;  /* rounded-lg */
  padding:          24px;  /* p-6 */
  display:          flex;
  flex-direction:   column;
  align-items:      center;
  justify-content:  center;
  width:            100%;
  height: auto;
}
.tints-swatch .font-medium {
  font-weight: 500;
}
.tints-swatch > div:first-child {
  font-size: 1rem;   /* 16px label */
}
.tints-swatch > div:last-child {
  font-size: 0.875rem; /* 14px hex code */
  margin-top: 0.25rem;
}

/* — Semantic Role Previews — */
#preview-primary {
  background-color: var(--color-primary);
  color:            var(--on-primary);
}
#preview-secondary {
  background-color: var(--color-secondary);
  color:            var(--on-secondary);
}
#preview-neutral {
  /* transparent bg for text example */
  background-color: transparent;
  color:            var(--color-neutral);
}

/* — Semantic Role Labels — */
.hex-label {
  color: var(--color-text);
}
.on-hex-label {
  color: var(--color-border);
}