/* ============================================================
   FaceCare AI — Shared Design System
   Palette: Blush / Beige / Cream / Dusty Rose
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500;600&family=DM+Sans:wght@300;400;500;600&display=swap');

:root {
  /* Core Palette */
  --cream:        #FAF7F4;
  --blush:        #F2D4CC;
  --blush-mid:    #E8B4A8;
  --rose:         #C9897A;
  --rose-dark:    #A0604F;
  --beige:        #EDE0D4;
  --beige-mid:    #D4B8A8;
  --sand:         #C4A882;
  --warm-white:   #FFFCFA;
  --petal:        #F9EDE8;
  --lavender:     #E8DDF0;
  --sage:         #D4E0D4;

  /* Burnt Sienna Accent Palette (for visualizations & strong accents) */
  --sienna-1:     #E09469;   /* warm peach — lightest */
  --sienna-2:     #D4745A;   /* terracotta mid */
  --sienna-3:     #C46B5A;   /* burnt sienna */
  --sienna-4:     #A36847;   /* deep sienna */
  --sienna-5:     #8F3D18;   /* dark burnt */
  --sienna-6:     #7B2103;   /* very dark */
  --sienna-amber: #E09131;   /* amber accent */
  --sienna-coral: #E05D38;   /* coral accent */
  --sienna-blush: #E0A6AC;   /* soft blush-sienna */
  --sienna-light: #EFC4B3;   /* lightest warm */
  --sienna-gold:  #C9823F;   /* golden sienna */

  /* Visualization colors (acne types, wrinkle severity, etc.) */
  --viz-blackhead:  #4B2823;
  --viz-whitehead:  #DFCBC2;
  --viz-papule:     #D4745A;
  --viz-pustule:    #E09131;
  --viz-nodule:     #8F3D18;
  --viz-darkspot:   #7B2103;
  --viz-none:       #B3D09D;
  --viz-mild:       #E9B37A;
  --viz-moderate:   #E05D38;
  --viz-severe:     #8F3D18;
  --viz-oily:       #E09131;
  --viz-normal:     #C9823F;
  --viz-dry:        #D4745A;

  /* Text */
  --text-dark:    #2C2420;
  --text-mid:     #6B5B52;
  --text-light:   #A89890;
  --text-hint:    #C4B0A8;

  /* UI */
  --border:       rgba(180, 140, 120, 0.2);
  --border-focus: rgba(180, 140, 120, 0.5);
  --shadow-soft:  0 4px 24px rgba(160, 96, 79, 0.08);
  --shadow-card:  0 8px 40px rgba(160, 96, 79, 0.12);
  --shadow-btn:   0 6px 20px rgba(160, 96, 79, 0.25);

  /* Fonts */
  --font-serif:   'Cormorant Garamond', Georgia, serif;
  --font-sans:    'DM Sans', -apple-system, sans-serif;

  /* Radii */
  --radius-sm:    10px;
  --radius-md:    16px;
  --radius-lg:    24px;
  --radius-xl:    32px;
  --radius-full:  999px;
}

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

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

body {
  font-family: var(--font-sans);
  background: var(--cream);
  color: var(--text-dark);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* ── Phone Frame Wrapper ── */
.fc-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, #F5EDE6 0%, #EDD8CC 40%, #E8CFC4 100%);
  padding: 20px;
}

.fc-frame {
  width: 390px;
  min-height: 844px;
  background: var(--warm-white);
  border-radius: 44px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 30px 80px rgba(120, 70, 50, 0.18), 0 0 0 1px rgba(200,160,140,0.2);
  display: flex;
  flex-direction: column;
}

/* ── Top Bar ── */
.fc-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 28px 0;
}

.fc-topbar-logo {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 500;
  color: var(--text-dark);
  letter-spacing: 0.5px;
}

.fc-topbar-action {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--rose);
  text-decoration: none;
  letter-spacing: 0.3px;
}

/* ── Buttons ── */
.fc-btn {
  display: block;
  width: 100%;
  padding: 17px 24px;
  border: none;
  border-radius: var(--radius-full);
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.4px;
  cursor: pointer;
  transition: all 0.25s ease;
  text-align: center;
  text-decoration: none;
}

.fc-btn-primary {
  background: linear-gradient(135deg, var(--rose) 0%, var(--rose-dark) 100%);
  color: #fff;
  box-shadow: var(--shadow-btn);
}

.fc-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(160,96,79,0.35); }
.fc-btn-primary:active { transform: translateY(0); }

.fc-btn-outline {
  background: transparent;
  color: var(--rose);
  border: 1.5px solid var(--blush-mid);
}

.fc-btn-outline:hover { background: var(--petal); }

.fc-btn-ghost {
  background: transparent;
  color: var(--text-mid);
  font-size: 14px;
  padding: 12px;
}

/* ── Inputs ── */
.fc-field {
  margin-bottom: 18px;
}

.fc-label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-light);
  letter-spacing: 0.8px;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.fc-input, .fc-select {
  width: 100%;
  padding: 15px 18px;
  background: var(--petal);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--text-dark);
  outline: none;
  transition: all 0.2s ease;
  -webkit-appearance: none;
  appearance: none;
}

.fc-input::placeholder { color: var(--text-hint); }

.fc-input:focus, .fc-select:focus {
  border-color: var(--blush-mid);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(232,180,168,0.2);
}

.fc-input.error, .fc-select.error {
  border-color: #E07070;
  background: #FFF5F5;
}

.fc-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23A89890' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 16px;
  padding-right: 44px;
  cursor: pointer;
}

.fc-select option { background: #fff; color: var(--text-dark); }

.fc-error-msg {
  font-size: 12px;
  color: #C05050;
  margin-top: 5px;
  display: none;
}
.fc-error-msg.show { display: block; }

/* ── Card ── */
.fc-card {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: var(--shadow-soft);
  border: 1px solid var(--border);
}

/* ── Divider ── */
.fc-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0;
}
.fc-divider::before, .fc-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}
.fc-divider span {
  font-size: 12px;
  color: var(--text-hint);
  letter-spacing: 0.5px;
}

/* ── Badge ── */
.fc-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 500;
}

.fc-badge-blush { background: var(--blush); color: var(--rose-dark); }
.fc-badge-sage  { background: var(--sage);  color: #4A6B4A; }
.fc-badge-lav   { background: var(--lavender); color: #6B4A8B; }

/* ── Floating petal animation ── */
.fc-petals {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.fc-petal {
  position: absolute;
  border-radius: 50% 0 50% 0;
  opacity: 0;
  animation: petal-fall linear infinite;
}

@keyframes petal-fall {
  0%   { transform: translateY(-20px) rotate(0deg);   opacity: 0; }
  10%  { opacity: 0.6; }
  90%  { opacity: 0.3; }
  100% { transform: translateY(900px) rotate(360deg); opacity: 0; }
}

/* ── Shimmer on button ── */
.fc-shimmer {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.25) 50%, transparent 100%);
  transform: translateX(-100%);
  animation: fc-shimmer 2.5s infinite;
  border-radius: inherit;
}

@keyframes fc-shimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* ── Fade-in entrance ── */
.fc-fade-in {
  animation: fc-fade-in 0.6s ease both;
}

@keyframes fc-fade-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

.fc-fade-in-delay-1 { animation-delay: 0.1s; }
.fc-fade-in-delay-2 { animation-delay: 0.2s; }
.fc-fade-in-delay-3 { animation-delay: 0.3s; }
.fc-fade-in-delay-4 { animation-delay: 0.4s; }
.fc-fade-in-delay-5 { animation-delay: 0.5s; }

/* ── Pulse ring ── */
@keyframes fc-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(201,137,122,0.4); }
  50%       { box-shadow: 0 0 0 12px rgba(201,137,122,0); }
}

.fc-pulse { animation: fc-pulse 2.5s ease-in-out infinite; }

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--blush-mid); border-radius: 4px; }