/* ==========================================================================
   Tanuku City – design tokens & base styles
   Breakpoints: mobile <576 · tablet 576–991 · laptop 992–1199 · desktop 1200+ · large 1400+
   ========================================================================== */

:root {
  /* Brand */
  --tc-blue: #0b63e5;
  --tc-blue-600: #0952c0;
  --tc-blue-50: #eaf2ff;
  --tc-blue-100: #d6e6ff;
  --tc-navy: #0b1f3a;
  --tc-navy-800: #102a4c;
  --tc-navy-700: #173863;
  --tc-saffron: #ff8a1f;
  --tc-saffron-50: #fff3e6;
  --tc-green: #16a34a;
  --tc-whatsapp: #1fa855;
  --tc-rose: #e11d48;
  --tc-brand-green: #16a33a;
  --tc-brand-red: #e8021c;

  /* Neutrals */
  --tc-bg: #f5f8fc;
  --tc-surface: #ffffff;
  --tc-text: #0f1b2d;
  --tc-muted: #5b6b82;
  --tc-line: #e3e9f2;

  /* Type */
  --tc-font-display: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --tc-font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Shape & depth */
  --tc-radius-sm: 10px;
  --tc-radius: 18px;
  --tc-radius-lg: 26px;
  --tc-shadow-sm: 0 1px 2px rgba(11, 31, 58, .06), 0 2px 8px rgba(11, 31, 58, .05);
  --tc-shadow: 0 6px 24px rgba(11, 31, 58, .08);
  --tc-shadow-lg: 0 18px 48px rgba(11, 31, 58, .16);
  --tc-ease: cubic-bezier(.2, .7, .2, 1);

  --tc-header-h: 72px;
  --tc-bottom-nav-h: 64px;

  /* Bootstrap overrides */
  --bs-body-font-family: var(--tc-font-body);
  --bs-body-color: var(--tc-text);
  --bs-body-bg: var(--tc-bg);
  --bs-primary: var(--tc-blue);
  --bs-primary-rgb: 11, 99, 229;
  --bs-link-color: var(--tc-blue);
  --bs-link-color-rgb: 11, 99, 229;
  --bs-link-hover-color: var(--tc-blue-600);
  --bs-border-radius: var(--tc-radius-sm);
}

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--tc-header-h) + 16px); }

body {
  font-family: var(--tc-font-body);
  background: var(--tc-bg);
  color: var(--tc-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  padding-bottom: calc(var(--tc-bottom-nav-h) + env(safe-area-inset-bottom));
}
@media (min-width: 992px) { body { padding-bottom: 0; } }

body.tc-no-scroll { overflow: hidden; }

h1, h2, h3, h4, h5 { font-family: var(--tc-font-display); letter-spacing: -.01em; color: var(--tc-text); }

a { color: var(--tc-blue); text-decoration: none; transition: color .2s; }
a:hover { color: var(--tc-blue-600); }

img { max-width: 100%; }

:focus-visible { outline: 3px solid rgba(11, 99, 229, .45); outline-offset: 2px; border-radius: 6px; }

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 2000;
  background: var(--tc-navy); color: #fff; padding: 10px 16px; border-radius: 8px;
}
.skip-link:focus { top: 12px; color: #fff; }

.noscript { padding: 24px; text-align: center; background: var(--tc-saffron-50); }

.container-xxl { padding-left: 16px; padding-right: 16px; }
@media (min-width: 768px) { .container-xxl { padding-left: 24px; padding-right: 24px; } }

.min-w-0 { min-width: 0; }
.text-white-75 { color: rgba(255, 255, 255, .78) !important; }

/* Page transition – ng-view element is recreated on each route */
.app-view { display: block; min-height: 60vh; animation: tc-page-in .35s var(--tc-ease); }
@keyframes tc-page-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Lazy images */
.tc-img { opacity: 0; transition: opacity .5s ease, transform .6s var(--tc-ease); background: linear-gradient(110deg, #e8eef7 30%, #f3f6fb 50%, #e8eef7 70%); }
.tc-img.is-loaded { opacity: 1; }

/* Scroll reveal */
.tc-reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s var(--tc-ease); }
.tc-reveal.is-revealed { opacity: 1; transform: none; }

/* Colour tones used by badges, icons, markers */
.tc-tone-blue { --tone: #0b63e5; --tone-bg: #eaf2ff; }
.tc-tone-navy { --tone: #173863; --tone-bg: #e6ecf5; }
.tc-tone-saffron { --tone: #e8710a; --tone-bg: #fff1e3; }
.tc-tone-green { --tone: #15803d; --tone-bg: #e7f7ed; }
.tc-tone-violet { --tone: #7c3aed; --tone-bg: #f1eafe; }
.tc-tone-rose { --tone: #e11d48; --tone-bg: #ffe8ee; }
.tc-tone-teal { --tone: #0d9488; --tone-bg: #e2f6f4; }
.tc-tone-amber { --tone: #b45309; --tone-bg: #fff4dc; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .tc-reveal { opacity: 1; transform: none; }
}