/* Thane Flats — shared brand palette (mirrors EmailBranding.cs) */
:root {
  --tf-navy-950: #070b12;
  --tf-navy-900: #0a0f1a;
  --tf-navy-800: #0f172a;
  --tf-navy-700: #141c2b;
  --tf-navy-600: #1e293b;
  --tf-navy-500: #334155;

  --tf-gold-300: #fde68a;
  --tf-gold-400: #f5b83d;
  --tf-gold-500: #e8a82e;
  --tf-gold-600: #c9971a;
  --tf-gold-700: #a67c14;

  --tf-on-navy: #f8fafc;
  --tf-on-gold: #1a1208;

  --tf-surface-page: #f8fafc;
  --tf-accent-gradient: linear-gradient(135deg, #f5b83d 0%, #e8a82e 52%, #c9971a 100%);
  --tf-accent-gradient-hover: linear-gradient(135deg, #f7c14a 0%, #f0b840 45%, #d4a020 100%);
  --tf-link: var(--tf-gold-600);
  --tf-link-hover: var(--tf-gold-700);
  --tf-shadow-gold: 0 4px 14px rgba(201, 151, 26, 0.28);

  /* App-wide page inset (Web, Builder, Admin). Same token on every desk.
     16px phone · 24px tablet · 32px desktop · 40px at 1600px+. */
  --portal-gutter: 1rem;
}

@media (min-width: 768px) {
  :root {
    --portal-gutter: 1.5rem;
  }
}

@media (min-width: 1200px) {
  :root {
    --portal-gutter: 2rem;
  }
}

@media (min-width: 1600px) {
  :root {
    --portal-gutter: 2.5rem;
  }
}

/* App-wide left/right inset. Use on header, main, footer, and notices. */
.portal-gutter-x {
  padding-left: var(--portal-gutter) !important;
  padding-right: var(--portal-gutter) !important;
}