@charset "UTF-8";

@font-face {
  font-family: 'Google Sans';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/GoogleSans-VariableFont_GRAD_opsz_wght.ttf') format('truetype');
}

@font-face {
  font-family: 'Google Sans';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/GoogleSans-Italic-VariableFont_GRAD_opsz_wght.ttf') format('truetype');
}

:root {
  --font-sans: 'Google Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* TrueAds Brand Colors */
  --orange-50:  #FFF5F1;
  --orange-100: #FFE6DC;
  --orange-200: #FFCDBB;
  --orange-300: #FFA78B;
  --orange-400: #FF7A45;
  --orange-500: #FB5A2D;
  --orange-600: #F4441F;
  --orange-700: #D83011;
  --orange-800: #B1250B;
  --orange-900: #8E200B;

  --grad-brand: linear-gradient(135deg, #FF7A45 0%, #F4441F 100%);
  --grad-brand-soft: linear-gradient(135deg, rgba(255,122,69,0.12) 0%, rgba(244,68,31,0.06) 100%);
  --shadow-brand: 0 10px 24px -4px rgba(244, 68, 31, 0.35);

  /* Ink / Neutral Palette */
  --ink-50:  #F8FAFC;
  --ink-100: #F1F3F7;
  --ink-200: #E4E7EC;
  --ink-300: #D0D5DD;
  --ink-400: #98A2B3;
  --ink-500: #667085;
  --ink-600: #475467;
  --ink-700: #344054;
  --ink-800: #1D2939;
  --ink-900: #16181D;
  --white:   #FFFFFF;

  /* Semantic Palettes */
  --success-50:  #F0FDF4;
  --success-500: #22C55E;
  --success-600: #16A34A;

  --warning-50:  #FFFBEB;
  --warning-500: #F59E0B;
  --warning-600: #D97706;

  --danger-50:   #FEF2F2;
  --danger-200:  #FECACA;
  --danger-500:  #EF4444;
  --danger-600:  #DC2626;

  --info-50:     #EFF6FF;
  --info-500:    #3B82F6;
  --info-600:    #2563EB;

  --ch-facebook: #1877F2;

  /* Surface & Text */
  --bg-page:        #F8FAFC;
  --bg-surface:     #FFFFFF;
  --text-primary:   #16181D;
  --text-secondary: #667085;
  --text-tertiary:  #98A2B3;
  --text-brand:     #F4441F;

  --border-subtle:  #E4E7EC;
  --border-strong:  #D0D5DD;

  --shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.05);
  --shadow-sm: 0 1px 3px rgba(16, 24, 40, 0.1), 0 1px 2px rgba(16, 24, 40, 0.06);
  --shadow-md: 0 4px 8px -2px rgba(16, 24, 40, 0.1), 0 2px 4px -2px rgba(16, 24, 40, 0.06);
  --shadow-lg: 0 12px 16px -4px rgba(16, 24, 40, 0.08), 0 4px 6px -2px rgba(16, 24, 40, 0.03);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  min-height: 100vh;
  font-family: var(--font-sans);
  background: var(--bg-page);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--orange-600);
  text-decoration: none;
}
a:hover {
  color: var(--orange-700);
  text-decoration: underline;
}

input, textarea, select, button {
  font-family: inherit;
}

.field-invalid {
  border-color: var(--danger-500) !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12) !important;
}

.field-error-message {
  margin-top: 5px;
  color: var(--danger-600);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
}

.app-toast-live {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 9999;
  max-width: 420px;
  padding: 13px 16px;
  border-radius: 12px;
  background: var(--ink-900);
  color: #fff;
  box-shadow: var(--shadow-lg);
  font-size: 14px;
  font-weight: 650;
  line-height: 1.45;
  animation: fadeIn .2s ease-out;
}

textarea {
  resize: vertical;
}

*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
*::-webkit-scrollbar-thumb {
  background: var(--ink-300);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: content-box;
}

/* Animations */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.anim-fade-in {
  animation: fadeIn 0.25s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* Modal styles */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(22, 24, 29, 0.5);
  backdrop-filter: blur(4px);
  z-index: 99;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.modal-card {
  background: var(--bg-surface);
  border-radius: 16px;
  max-width: 520px;
  width: 100%;
  padding: 24px;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border-subtle);
  animation: fadeIn 0.2s cubic-bezier(0.22, 1, 0.36, 1);
  max-height: calc(100vh - 40px);
  overflow-y: auto;
}