/* EzyCRM visual identity — overrides Twenty theme tokens */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&display=swap');

:root,
.light {
  --t-font-family: 'Outfit', system-ui, sans-serif !important;

  /* Teal accents instead of indigo */
  --t-accent-primary: #ccfbf1 !important;
  --t-accent-secondary: #99f6e4 !important;
  --t-accent-tertiary: #5eead4 !important;
  --t-accent-quaternary: #f0fdfa !important;
  --t-accent-accent3570: #2dd4bf !important;
  --t-accent-accent4060: #14b8a6 !important;
  --t-accent-accent1: #f0fdfa !important;
  --t-accent-accent2: #ccfbf1 !important;
  --t-accent-accent3: #99f6e4 !important;
  --t-accent-accent4: #5eead4 !important;
  --t-accent-accent5: #2dd4bf !important;
  --t-accent-accent6: #14b8a6 !important;
  --t-accent-accent7: #0d9488 !important;
  --t-accent-accent8: #0f766e !important;
  --t-accent-accent9: #0f766e !important;
  --t-accent-accent10: #115e59 !important;
  --t-accent-accent11: #134e4a !important;
  --t-accent-accent12: #042f2e !important;

  --t-color-blue: #0f766e !important;
  --t-color-blue1: #f0fdfa !important;
  --t-color-blue2: #ccfbf1 !important;
  --t-color-blue3: #99f6e4 !important;
  --t-color-blue4: #5eead4 !important;
  --t-color-blue5: #2dd4bf !important;
  --t-color-blue6: #14b8a6 !important;
  --t-color-blue7: #0d9488 !important;
  --t-color-blue8: #0f766e !important;
  --t-color-blue9: #0f766e !important;
  --t-color-blue10: #115e59 !important;
  --t-color-blue11: #134e4a !important;
  --t-color-blue12: #042f2e !important;

  --t-buttons-secondary-text-color: #0f766e !important;

  /* Cool mint-tinted surfaces (not flat Twenty gray/white) */
  --t-background-primary: #f4fbf9 !important;
  --t-background-secondary: #e8f7f3 !important;
  --t-background-tertiary: #d5efe9 !important;
  --t-background-quaternary: #c5e6df !important;
  --t-background-inverted-primary: #0f766e !important;
  --t-background-inverted-secondary: #115e59 !important;
  --t-background-primary-inverted: #0f766e !important;
  --t-background-primary-inverted-hover: #115e59 !important;

  --t-font-color-primary: #134e4a !important;
  --t-font-color-secondary: #3f6864 !important;
  --t-font-color-tertiary: #5f837f !important;

  --t-gray-scale-gray1: #f4fbf9 !important;
  --t-gray-scale-gray2: #e8f7f3 !important;
  --t-gray-scale-gray3: #d5efe9 !important;
  --t-gray-scale-gray4: #c5e6df !important;
  --t-gray-scale-gray5: #a8d5cc !important;
  --t-gray-scale-gray11: #3f6864 !important;
  --t-gray-scale-gray12: #134e4a !important;
}

.dark {
  --t-font-family: 'Outfit', system-ui, sans-serif !important;
  --t-accent-accent9: #2dd4bf !important;
  --t-color-blue: #2dd4bf !important;
  --t-background-primary: #042f2e !important;
  --t-background-secondary: #0a3d3a !important;
  --t-background-tertiary: #115e59 !important;
}

html,
body,
button,
input,
textarea,
select {
  font-family: 'Outfit', system-ui, sans-serif !important;
}

/* Auth / welcome: full-bleed brand atmosphere */
html.light body {
  background:
    radial-gradient(ellipse 80% 60% at 10% 20%, rgba(45, 212, 191, 0.35), transparent 55%),
    radial-gradient(ellipse 70% 50% at 90% 80%, rgba(15, 118, 110, 0.18), transparent 50%),
    linear-gradient(145deg, #ecfdf8 0%, #f4fbf9 45%, #e0f2fe 100%) !important;
  min-height: 100vh;
}

/* Primary inverted buttons → teal */
button[class*='primary'],
a[class*='primary'] {
  /* soft hint; Twenty uses CSS vars for most buttons */
}

/* Hide secondary workspace chip on auth logo if it doubles the brand */
body [class*='SecondaryLogo'] {
  border: 2px solid #0f766e !important;
}

/* Brand wordmark under logo on auth screens */
#ezycrm-wordmark {
  font-family: 'Outfit', system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.85rem;
  letter-spacing: -0.03em;
  color: #0f766e;
  text-align: center;
  margin: 0.5rem 0 0.35rem;
  position: relative;
  z-index: 2;
}

#ezycrm-tagline {
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: 0.95rem;
  color: #5f837f;
  text-align: center;
  margin: 0 auto 1.5rem;
  position: relative;
  z-index: 2;
  max-width: 280px;
  white-space: normal;
  line-height: 1.4;
  width: max-content;
}

/* Hide tiny secondary workspace badge on auth logo */
body a[href='/welcome'] + div,
body [class*='SecondaryLogo'],
body a[href='/welcome'] ~ div[class*='Avatar'] {
  /* fallback handled in JS title hide */
}