/* UpLift Sales — canonical brand layer.
   Consumed by the marketing page via <link> and by the app via an import in
   src/main.jsx. This file owns the brand tokens; nothing else defines them. */

:root {
  /* Brand */
  --uls-color-primary: #FF3B30;         /* Rocket Red */
  --uls-color-primary-hover: #E02424;   /* Rocket Red Dark */
  --uls-color-primary-fill: #E02424;    /* Rocket Red Dark — AA-safe (4.72:1) behind white text */
  --uls-color-secondary: #0EA5E9;       /* Orbit Sky Blue */
  --uls-color-secondary-hover: #0284C7; /* Deep Sky Blue */
  --uls-color-focus: #38BDF8;           /* Cyan Glow */
  --uls-color-accent: #F59E0B;          /* Thruster Amber */
  --uls-color-accent-gold: #FBBF24;     /* Solar Gold */

  /* Neutrals */
  --uls-bg-page: #FAFAFD;               /* Soft Sky White */
  --uls-bg-app: #F8FAFC;                /* Fuselage White */
  --uls-bg-card: #FFFFFF;               /* Pure White */
  --uls-bg-substrate: #F1F5F9;          /* Cloud Mist */
  --uls-border-light: #E2E8F0;          /* Soft Border */
  --uls-text-main: #0F172A;             /* Deep Space Slate */
  --uls-text-sub: #475569;              /* Mid Orbit Gray */
  --uls-text-muted: #94A3B8;            /* Muted Metadata */

  /* Status tints */
  --uls-tint-gold-bg: #FEF3C7;
  --uls-tint-gold-text: #B45309;
  --uls-tint-sky-bg: #E0F2FE;
  --uls-tint-sky-text: #0284C7;
  --uls-tint-red-bg: #FEE2E2;
  --uls-tint-red-text: #E02424;
  --uls-tint-green-bg: #DCFCE7;
  --uls-tint-green-text: #15803D;

  /* Typography */
  --uls-font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
  --uls-font-mono: 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace;

  /* Shape */
  --uls-radius-sm: 6px;
  --uls-radius-md: 12px;
  --uls-radius-pill: 9999px;

  /* Elevation */
  --uls-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06);
  --uls-shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08);
  --uls-shadow-pop: 0 10px 25px -5px rgba(255, 59, 48, 0.28);
}

*, *::before, *::after { box-sizing: border-box; }

/* Card */
.uls-card {
  background: var(--uls-bg-card);
  border: 1px solid var(--uls-border-light);
  border-radius: var(--uls-radius-md);
  padding: 20px;
  box-shadow: var(--uls-shadow-sm);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.uls-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--uls-shadow-md);
}

/* Buttons */
.uls-btn-primary,
.uls-btn-secondary {
  border: none;
  padding: 10px 22px;
  border-radius: var(--uls-radius-pill);
  font-weight: 700;
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  transition: background-color 0.15s ease-in-out, transform 0.15s ease-in-out;
}
.uls-btn-primary {
  background-color: var(--uls-color-primary-fill);
  color: #FFFFFF;
  box-shadow: var(--uls-shadow-pop);
}
/* A button that happens to sit inside prose.
   `.page-body a` (0,1,1) outranks `.uls-btn-primary` (0,1,0), so the marketing
   pages' link colour repainted the button's white label brand-red on a
   brand-red fill -- red on red -- and underlined it. This lived in
   thank-you.html alone, which is exactly why it came back on auth-action.html.
   Fixed once, here, for every page. */
.page-body a.uls-btn-primary,
.page-body a.uls-btn-secondary { text-decoration: none; }
/* Each keeps its OWN label colour, restated at a specificity that wins --
   copying one onto the other would just trade a red-on-red button for an
   invisible one. */
.page-body a.uls-btn-primary { color: #FFFFFF; }
.page-body a.uls-btn-secondary { color: var(--uls-text-main); }

.uls-btn-primary:hover {
  filter: brightness(0.92);
  transform: scale(1.03);
}
.uls-btn-secondary {
  background-color: transparent;
  color: var(--uls-text-main);
  border: 1px solid var(--uls-border-light);
}
.uls-btn-secondary:hover {
  background-color: var(--uls-bg-substrate);
  transform: scale(1.03);
}

/* Badges */
.uls-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--uls-radius-pill);
  font-weight: 700;
  font-size: 12px;
  background: var(--uls-bg-substrate);
  color: var(--uls-text-sub);
}
.uls-badge-streak { background: var(--uls-tint-gold-bg); color: var(--uls-tint-gold-text); }
.uls-badge-sky    { background: var(--uls-tint-sky-bg);  color: var(--uls-tint-sky-text); }
.uls-badge-red    { background: var(--uls-tint-red-bg);  color: var(--uls-tint-red-text); }

@media (prefers-reduced-motion: reduce) {
  .uls-card, .uls-btn-primary, .uls-btn-secondary { transition: none; }
  .uls-card:hover, .uls-btn-primary:hover, .uls-btn-secondary:hover { transform: none; }
}