/* ============================================================================
   Countdown GIF Studio — Independent theme (default, unaffiliated).
   A self-contained design token + component layer. It intentionally reuses the
   same CSS variable names and component class names the app already references
   (--p-*, .p-button, .p-inputtext, .q-toggle) so it is a drop-in replacement
   for the Positive design system — but with our own colour scheme and styling.

   To switch themes, change the single <link> in index.html / editor.html:
     themes/independent.css  → this independent look (default)
     themes/positive.css     → the original Positive design system
   ============================================================================ */

:root {
  /* Brand — teal → cyan (distinct from any purple/indigo identity) */
  --p-primary-50:  #ECFEFF;
  --p-primary-300: #5EEAD4;
  --p-primary-400: #2DD4BF;
  --p-primary-500: #14B8A6;
  --p-primary-600: #0D9488;
  --p-primary-700: #0F766E;
  --p-gradient-uma: linear-gradient(135deg, #14B8A6 0%, #06B6D4 100%);

  /* Neutral surfaces (clean slate) */
  --p-surface-0:   #FFFFFF;
  --p-surface-50:  #F8FAFC;
  --p-surface-100: #F1F5F9;
  --p-surface-200: #E6EBF1;
  --p-surface-300: #CBD5E1;
  --p-content-border-color: #E4E9F0;
  --p-text-color:       #0F1B2A;
  --p-text-muted-color: #64748B;

  /* Toggle handle helpers */
  --p-neutral-0:   #FFFFFF;
  --p-neutral-600: #94A3B8;

  /* Semantic */
  --p-success-50:  #ECFDF5;
  --p-success-500: #10B981;
  --p-success-600: #059669;
  --p-success-700: #047857;
  --p-warning-50:  #FFFBEB;
  --p-warning-700: #B45309;
  --p-danger-500:  #F43F5E;
  --p-danger-600:  #E11D48;

  /* Elevation */
  --p-shadow-small: 0 1px 2px rgba(15,27,42,.06), 0 1px 3px rgba(15,27,42,.10);
  --p-shadow-large: 0 24px 48px -20px rgba(15,27,42,.28), 0 8px 20px -10px rgba(15,27,42,.16);
}

/* ---------- Buttons ---------- */
.p-button {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: inherit; font-weight: 600; line-height: 1;
  background: var(--p-primary-500); color: #fff;
  border: 1px solid var(--p-primary-500); border-radius: 9px;
  cursor: pointer; text-decoration: none; -webkit-appearance: none;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, filter .15s ease;
}
.p-button:hover { background: var(--p-primary-600); border-color: var(--p-primary-600); }
.p-button:active { filter: brightness(.97); }
.p-button:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--p-primary-50); }
.p-button-icon, .p-button-label { display: inline-flex; align-items: center; }
/* Variants (the app also sets explicit inline colours for these where needed) */
.p-button-text { background: none; border-color: transparent; color: var(--p-text-color); }
.p-button-text:hover { background: var(--p-surface-100); border-color: transparent; }
.p-button-secondary, .p-button-outlined { color: var(--p-text-color); }

/* ---------- Text inputs / selects / textareas ---------- */
.p-inputtext {
  background: var(--p-surface-0); color: var(--p-text-color);
  border: 1px solid var(--p-content-border-color); border-radius: 9px;
  padding: 9px 11px; font-size: 14px; font-family: inherit; line-height: 1.3;
  outline: none; transition: border-color .15s ease, box-shadow .15s ease;
}
.p-inputtext::placeholder { color: var(--p-text-muted-color); }
.p-inputtext:hover { border-color: var(--p-surface-300); }
.p-inputtext:focus { border-color: var(--p-primary-500); box-shadow: 0 0 0 3px var(--p-primary-50); }

/* ---------- Toggle switch ---------- */
.q-toggle { display: inline-flex; align-items: center; cursor: pointer; }
.q-toggle .track {
  width: 40px; height: 20px; border-radius: 9999px; padding: 2px;
  background: var(--p-surface-200); display: flex; align-items: center;
  transition: background .15s ease;
}
.q-toggle .handle {
  width: 16px; height: 16px; border-radius: 9999px; background: var(--p-neutral-600);
  transition: transform .15s ease, background .15s ease;
}
.q-toggle.checked .track { background: var(--p-primary-500); }
.q-toggle.checked .handle { background: var(--p-neutral-0); transform: translateX(20px); }
.q-toggle.disabled { opacity: .6; cursor: not-allowed; }

/* ---------- App root scope (layout is set inline; nothing brand-specific needed) ---------- */
.hr-quantum { color: var(--p-text-color); }