/* Thane Flats — shared brand palette (web + Android gold studio + email) */
:root {
  --tf-navy-950: #05080f;
  --tf-navy-900: #0a0e1a;
  --tf-navy-800: #0f1626;
  --tf-navy-700: #141c2b;
  --tf-navy-600: #1e293b;
  --tf-navy-500: #334155;

  --tf-gold-200: #fff4cc;
  --tf-gold-300: #fde68a;
  --tf-gold-400: #f5b83d;
  --tf-gold-500: #e8a82e;
  --tf-gold-600: #c9971a;
  --tf-gold-700: #a67c14;
  --tf-gold-800: #7a5a0e;

  --tf-on-navy: #f8fafc;
  --tf-on-navy-muted: rgba(248, 250, 252, 0.72);
  --tf-on-gold: #1a1208;

  --tf-surface-page: #f4f6f9;
  --tf-surface-stage: #eef1f6;
  --tf-surface-card: #ffffff;
  --tf-border-subtle: rgba(148, 163, 184, 0.28);
  --tf-border-gold: rgba(232, 168, 46, 0.38);

  --tf-header-gradient: linear-gradient(180deg, #121a2a 0%, #0a0e1a 48%, #05080f 100%);
  --tf-accent-gradient: linear-gradient(135deg, #f7c14a 0%, #e8a82e 48%, #c9971a 100%);
  --tf-accent-gradient-hover: linear-gradient(135deg, #fde68a 0%, #f5b83d 42%, #d4a020 100%);
  --tf-gold-rim: linear-gradient(
    90deg,
    transparent 0%,
    rgba(201, 151, 26, 0.35) 12%,
    #f5b83d 50%,
    rgba(201, 151, 26, 0.35) 88%,
    transparent 100%
  );

  --tf-focus-ring: var(--tf-gold-500);
  --tf-link: var(--tf-gold-600);
  --tf-link-hover: var(--tf-gold-700);

  --tf-radius-pill: 999px;
  --tf-radius-card: 1.05rem;
  --tf-shadow-header: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --tf-shadow-gold: 0 6px 18px rgba(201, 151, 26, 0.32);
  --tf-shadow-stage: 0 28px 60px rgba(7, 11, 18, 0.08);
  /* Header logo: rest interval (ms) between flips; motion length is --tf-logo-flip-duration */
  --tf-logo-flip-interval-ms: 60000;
  --tf-logo-flip-duration: 2.8s;

  /* 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;
}