/* Warm style - カフェ/小売/接客向け、アースカラー、温かみ */

/* Color variables */
@theme {
  --color-warm-primary: oklch(0.55 0.12 50);
  --color-warm-secondary: oklch(0.65 0.08 80);
  --color-warm-accent: oklch(0.6 0.1 30);
}

/* Font settings - 親しみやすい */
body[data-style="warm"] {
  font-family: 'Nunito', 'Noto Sans JP', ui-sans-serif, system-ui, sans-serif;
}

body[data-style="warm"] .font-display {
  font-family: 'Playfair Display', 'Noto Serif JP', ui-serif, Georgia, serif;
  font-weight: 500;
}

/* Background - warm earthy tones */
body[data-style="warm"].bg-style {
  background-image:
    radial-gradient(ellipse 100% 50% at 50% 0%, oklch(0.92 0.04 80 / 0.5), transparent),
    linear-gradient(180deg, oklch(0.98 0.02 50 / 0.3) 0%, oklch(0.99 0.01 80 / 0.2) 100%);
}

/* Form components - friendly rounded */
body[data-style="warm"] .input,
body[data-style="warm"] .select,
body[data-style="warm"] .textarea,
body[data-style="warm"] .file-input {
  border-radius: 0.5rem;
  border-color: oklch(0.85 0.04 50);
  background-color: oklch(0.99 0.01 50);
}

body[data-style="warm"] .input:focus,
body[data-style="warm"] .select:focus,
body[data-style="warm"] .textarea:focus {
  border-color: var(--color-warm-primary);
  background-color: oklch(1 0 0);
}

/* Checkbox styling */
body[data-style="warm"] .checkbox {
  background-color: oklch(0.98 0.02 50);
  border-color: oklch(0.8 0.04 50);
  border-radius: 0.25rem;
}

body[data-style="warm"] .checkbox:checked {
  background-color: var(--color-warm-primary);
  border-color: var(--color-warm-primary);
}

/* Card styling - cozy feel */
body[data-style="warm"] .card {
  background-color: oklch(0.995 0.005 50);
  border: 1px solid oklch(0.92 0.02 50);
  box-shadow: 0 2px 8px oklch(0.5 0.05 50 / 0.08);
}

/* Button styling */
body[data-style="warm"] .btn-primary {
  background-color: var(--color-warm-primary);
  border-color: var(--color-warm-primary);
}

/* Table styling - soft background */
body[data-style="warm"] thead th {
  background-color: oklch(0.96 0.02 50);
}

body[data-style="warm"][data-theme="dark"] thead th {
  background-color: oklch(0.3 0.02 50);
}