/* ─── Base color palette ─────────────────────────────────── */
:root {
  /* Grey scale */
  --color-grey-50:    #fafafa;
  --color-grey-100:   #f7f7f7;
  --color-grey-200:   #e5e5e5;
  --color-grey-300:   #cbcbcb;
  --color-grey-400:   #888888;
  --color-grey-500:   #737373;
  --color-grey-600:   #545454;
  --color-grey-700:   #404040;
  --color-grey-800:   #252525;
  --color-grey-900:   #161616;
  --color-black:      #000000;
  --color-white:      #ffffff;

  /* Brand colors (Figma: Red-500, Orange-500, Pink-500, Purple-500) */
  --color-red-600:     #e21e25;   /* Figma: Red-500   */
  --color-red-700:     #b91c1c;   /* Figma: Red-700   */
  --color-orange-600:  #e8542a;   /* Figma: Orange-500 */
  --color-pink-500:    #ff007f;   /* Figma: Pink-500  */
  --color-purple-500:  #c500d8;   /* Figma: Purple-500 (was --color-fuschia-500) */
  --color-gradient-primary-start: #e43127;  /* gradient left  */
  --color-gradient-primary-end:   #d701be;  /* gradient right */
  --color-yellow-700:  #a16207;   /* Figma: Yellow-700 */
  --color-green-50:    #f0fdf4;   /* Tailwind green-50 — softest mint fill */
  --color-green-100:   #dcfce7;   /* Tailwind green-100 — pale fill */
  --color-green-300:   #86efac;   /* Tailwind green-300 — subtle border accent */
  --color-green-700:   #15803d;   /* Tailwind green-700 — stronger border on hover */
  --color-green-800:   #166534;   /* Figma: Green-800 — readable badge/text on light fill */
}

/* ─── Semantic color tokens ──────────────────────────────── */
:root {
  --figma-bg-page:        var(--color-grey-100);  /* #f7f7f7 */
  --figma-bg-surface:     var(--color-white);      /* #ffffff */
  --figma-bg-subtle:      var(--color-grey-50);    /* #fafafa */
  --figma-border-subtle:  var(--color-grey-200);   /* #e5e5e5 */
  --figma-border-default: var(--color-grey-300);   /* #cbcbcb */
  --figma-text-default:   var(--color-grey-900);   /* #161616 */
  --figma-text-body:      var(--color-grey-800);   /* #252525 */
  --figma-text-muted:     var(--color-grey-500);   /* #737373 */
  --figma-text-subtle:    var(--color-grey-600);   /* #545454 */

  --system-error:         var(--color-red-700);    /* #b91c1c */
}

/* ─── Typography ─────────────────────────────────────────── */
:root {
  --figma-font-family-base:      'Beausite Classic', Arial, sans-serif;
  --figma-font-family-secondary: 'Poppins', Arial, sans-serif;

  --figma-line-tight:  1.35;
  --figma-line-normal: 1.4;
  --figma-line-loose:  1.6;
}

/* ─── Radii ──────────────────────────────────────────────── */
:root {
  --figma-radius-sm:   6px;      /* radius/75,  rounded-md  */
  --figma-radius-md:   12px;     /* radius/150              */
  --figma-radius-lg:   16px;     /* rounded-2xl             */
  --figma-radius-pill: 9999px;
}

/* ─── Shadows ────────────────────────────────────────────── */
:root {
  --figma-shadow-sm: 0 0 10px rgba(0, 0, 0, 0.10);   /* shadow-small */
  --figma-shadow-lg: 0 5px 10px rgba(0, 0, 0, 0.20); /* shadow-large */
}

/* ─── Energy contracts form ──────────────────────────────── */

/* Accordion section card */
.ec-section-card {
  background: var(--figma-bg-surface);
  border: 1px solid var(--figma-border-subtle);
  border-radius: var(--figma-radius-sm);
}

/* Main form card */
.ec-card {
  background: var(--figma-bg-surface);
  border: 1px solid var(--figma-border-subtle);
  border-radius: var(--figma-radius-lg);
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.05);
}

/* Location inputs use subtle background */
.ec-location-fields input[type="text"],
.ec-location-fields input[type="date"] {
  background-color: var(--figma-bg-subtle);
}

/* Agreements dropdowns match location input fill */
.ec-agreements-fields .oppy-select > button {
  background-color: var(--figma-bg-subtle);
}

/* Phone country-code prefix box */
.ec-phone-prefix {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 71px;
  min-width: 71px;
  height: 48px;
  padding: 0 12px;
  font-size: 12px;
  color: var(--color-black);
  background-color: var(--figma-bg-surface);
  border: 1px solid var(--figma-border-default);
  border-radius: var(--figma-radius-sm);
  flex-shrink: 0;
}

/* Sidebar divider */
.ec-sidebar-divider {
  height: 1px;
  background-color: var(--figma-border-default);
  width: 100%;
}

/* File upload drop zone */
.ec-upload-zone {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 24px 16px;
  border: 1px dashed var(--figma-border-default);
  border-radius: 4px;
  background-color: var(--figma-bg-surface);
  cursor: pointer;
}

.ec-upload-helper {
  font-size: 12px;
  font-weight: 300;
  color: var(--figma-text-subtle);
  line-height: var(--figma-line-loose);
}

.ec-upload-zone.is-error {
  border-color: var(--system-error);
}

.ec-upload-helper.is-error {
  color: var(--system-error);
}

/* Calendar date picker popup */
.ec-calendar-popup {
  position: fixed;
  z-index: 9999;
  background: var(--figma-bg-surface);
  border-radius: var(--figma-radius-md);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  padding: 16px 12px;
  width: 299px;
}

/* Calendar individual day cell */
.ec-calendar-day {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin: 1px auto;
  border-radius: 50%;
  font-size: 12px;
  cursor: pointer;
}

.ec-calendar-day--outside {
  color: var(--figma-border-default);
}

/* Trigger a dummy animation on autofill so Alpine can detect it */
@keyframes ec-autofill-start { from {} to {} }
.ec-form input:-webkit-autofill {
  animation-name: ec-autofill-start;
  animation-duration: 0.001s;
}

/* Toggle switch track — manages checked/disabled states in plain CSS
   so the template doesn't need arbitrary Tailwind gradient values */
.toggle-track {
  background-color: var(--figma-border-subtle);
  transition: background 200ms ease-in-out;
}
.peer:checked ~ .toggle-track {
  background: linear-gradient(114deg, var(--color-gradient-primary-start) 2.62%, var(--color-gradient-primary-end) 96.65%);
}
.peer:disabled ~ .toggle-track {
  opacity: 0.5;
  pointer-events: none;
}

[x-cloak] { display: none !important; }