/* Stadli Brand Theme — Bootstrap-friendly variables + components */
:root {
  /* Colors (Identity) */
  --color-bg: #0B0B0E;         /* Ink 900 */
  --color-surface: #1C1F26;    /* Ink 700 */
  --color-border: #2E3340;     /* Ink 500 */
  --color-text: #FFFFFF;       /* Stadli White */

  --accent-magenta: #FF2E9A;   /* Magenta Blaze */
  --accent-orange:  #FF5A1F;   /* Electric Orange */
  --accent-teal:    #00C2A8;   /* Signal Teal */
  --accent-cyan:    #45D7FF;   /* Sky Cyan */
  --accent-yellow:  #FFD400;   /* Arena Yellow */
  --accent-lime:    #66FF66;   /* Neon Lime */

  /* Gradients */
  --grad-sunset: linear-gradient(90deg,#FF2E9A 0%,#FF5A1F 100%);
  --grad-surge:  linear-gradient(90deg,#66FF66 0%,#00C2A8 100%);
  --grad-sky:    linear-gradient(90deg,#FFD400 0%,#45D7FF 100%);

  /* Type */
  --font-display: "Space Grotesk", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  --size-h1: 3rem;     /* posters / hero */
  --size-h2: 2.25rem;  /* module headers */
  --size-h3: 1.5rem;   /* card titles */
  --size-body: 1rem;
  --size-small: .875rem;

  --leading-tight: 1.1;
  --leading-normal: 1.4;
  --tracking-tight: -0.02em;

  /* Space, radii, elevation */
  --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px;
  --space-4: 16px; --space-6: 24px; --space-8: 32px; --space-12: 48px;

  --radius-sm: 8px; --radius-md: 16px; --radius-lg: 24px; --radius-2xl: 32px;

  --shadow-1: 0 1px 2px rgba(0,0,0,.25);
  --shadow-2: 0 6px 16px rgba(0,0,0,.35);
  --shadow-glow: 0 0 0 2px var(--accent-teal);
}

/* Base */
html, body {
  height: 100%;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  line-height: var(--leading-normal);
}
a { color: var(--accent-cyan); text-decoration: none; }
a:hover { text-decoration: underline; }
hr { border-color: var(--color-border); opacity: .35; }

/* Display / headings */
.h1, h1 { font-family: var(--font-display); font-weight: 700; letter-spacing: var(--tracking-tight); line-height: var(--leading-tight); font-size: var(--size-h1); }
.h2, h2 { font-family: var(--font-display); font-weight: 600; letter-spacing: var(--tracking-tight); line-height: var(--leading-tight); font-size: var(--size-h2); }
.h3, h3 { font-family: var(--font-display); font-weight: 600; letter-spacing: var(--tracking-tight); line-height: 1.2; font-size: var(--size-h3); }
small, .text-muted { color: #B9BFC7 !important; }

/* Surfaces */
.card, .offcanvas, .modal-content {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  color: var(--color-text);
}
.card .card-header {
  border-bottom: 1px solid var(--color-border);
  background: linear-gradient(0deg, rgba(255,255,255,0.02), rgba(255,255,255,0.02));
}

/* Gradient top border motif */
.gradient-top {
  position: relative;
}
.gradient-top::before {
  content: "";
  position: absolute; inset: 0 0 auto 0;
  height: 3px; border-top-left-radius: var(--radius-lg); border-top-right-radius: var(--radius-lg);
  background: var(--grad-surge);
}

/* Frame motif (poster-style) */
.frame-accent {
  position: relative;
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-2);
}
.frame-accent::after {
  content: "";
  position: absolute; inset: 0;
  border: 12px solid var(--accent-magenta);  /* default accent; swap via modifier */
  border-radius: var(--radius-2xl);
  pointer-events: none;
}
.frame-accent.teal::after { border-color: var(--accent-teal); }
.frame-accent.orange::after { border-color: var(--accent-orange); }

/* Buttons */
.btn {
  border-radius: var(--radius-md);
  font-weight: 600;
}
.btn-primary {
  background: var(--color-bg);        /* Ink 900, on dark UI we add glow to differentiate */
  color: var(--color-text);
  border: 1px solid var(--color-border);
  box-shadow: 0 0 0 0 rgba(0,0,0,0);
}
.btn-primary:hover { box-shadow: var(--shadow-glow); border-color: var(--accent-teal); }

.btn-accent {
  background: var(--accent-teal);
  color: var(--color-bg);
  border: none;
}
.btn-accent:hover { filter: brightness(1.05); }

.btn-magenta { background: var(--accent-magenta); color: var(--color-bg); border: none; }
.btn-magenta:hover { filter: brightness(1.05); }

/* Chips / badges */
.badge {
  border-radius: 999px;
  padding: 6px 10px;
  font-weight: 600;
}
.badge-segment {
  background: var(--color-border);
  color: var(--color-text);
}
.badge-push   { background: var(--accent-teal); color: var(--color-bg); }
.badge-email  { background: var(--accent-magenta); color: var(--color-bg); }
.badge-sms    { background: var(--accent-yellow); color: var(--color-bg); }

/* KPI tile */
.kpi {
  display: grid; gap: 4px;
  padding: 16px; border-radius: var(--radius-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}
.kpi .label { color: #B9BFC7; font-size: var(--size-small); }
.kpi .value { font-family: var(--font-display); font-size: 1.75rem; }

/* Phone shell for fan app previews */
.phone-shell {
  width: 380px; max-width: 100%;
  border-radius: 32px;
  padding: 16px 12px;
  background: #111317;
  border: 1px solid #242836;
  box-shadow: var(--shadow-2);
}

/* Nav & footer tweaks */
.navbar {
  background: rgba(12,12,14,.6);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-border);
}

/* Motion preferences */
@media (prefers-reduced-motion: no-preference) {
  .toast { transition: transform .2s cubic-bezier(.2,.8,.2,1), opacity .2s; }
  .btn { transition: box-shadow .2s, transform .06s; }
  .btn:hover { transform: translateY(-1px); }
}

/* Utility */
.accent-text { color: var(--accent-teal) !important; }
.grad-surge { background: var(--grad-surge); }
.grad-sunset { background: var(--grad-sunset); }
.border-soft { border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.text-cloud { color: #D7DBE0; }
.bg-surface { background: var(--color-surface) !important; }