/*
  Design tokens ported 1:1 from the Ko//ab Stitch design system
  ("Flux Pro" / "The Ethereal Engine" — Stitch project 7239859019480140209).
  Do not hand-tune these values — update via Stitch and re-port instead,
  so every portal stays visually identical.
*/

:root {
  /* Surface hierarchy (the "No-Line" rule: no 1px borders — boundaries are
     tonal shifts between these five layers, from receded to elevated) */
  --surface: #0c0e12;
  --surface-dim: #0c0e12;
  --surface-bright: #292c32;
  --surface-container-lowest: #000000;
  --surface-container-low: #111318;
  --surface-container: #171a1f;
  --surface-container-high: #1d2025;
  --surface-container-highest: #23262c;
  --surface-variant: #23262c;
  --surface-tint: #a3a6ff;

  /* Brand accents — CTAs/hero use a linear-gradient(primary -> secondary) */
  --primary: #a3a6ff;
  --primary-dim: #6063ee;
  --primary-container: #9396ff;
  --primary-fixed: #9396ff;
  --primary-fixed-dim: #8387ff;
  --on-primary: #0f00a4;
  --on-primary-container: #0a0081;
  --on-primary-fixed: #000000;

  --secondary: #c180ff;
  --secondary-dim: #9c48ea;
  --secondary-container: #6f00be;
  --secondary-fixed: #e5c6ff;
  --secondary-fixed-dim: #dbb4ff;
  --on-secondary: #33005b;
  --on-secondary-container: #e9cdff;

  --tertiary: #ffa5d9;
  --tertiary-dim: #ef81c4;
  --tertiary-container: #ff8ed2;
  --on-tertiary: #701455;
  --on-tertiary-container: #63054a;

  --error: #ff6e84;
  --error-dim: #d73357;
  --error-container: #a70138;
  --on-error: #490013;
  --on-error-container: #ffb2b9;

  /* Status colors used by badges/pills across every portal (Active/Ended/Canceled, Pending/Approved/Rejected, etc.) */
  --status-success: #4ade80;
  --status-warning: #fbbf24;
  --status-danger: var(--error);
  --status-neutral: #9ca3af;

  --on-surface: #f6f6fc;
  --on-surface-variant: #aaabb0;
  --outline: #74757a;
  --outline-variant: #46484d;

  /* Typography */
  --font-headline: "Plus Jakarta Sans", sans-serif;
  --font-body: "Inter", sans-serif;

  /* Corners — "squircle nesting": lg for outer cards, DEFAULT for nested elements, full for pill buttons */
  --radius-sm: 0.5rem;   /* 8px */
  --radius-default: 1rem; /* 16px */
  --radius-lg: 2rem;      /* 32px */
  --radius-full: 3rem;    /* pill buttons */

  /* Spacing scale (2px base, per design system spacingScale) */
  --space-1: 0.125rem;
  --space-2: 0.25rem;
  --space-4: 0.5rem;
  --space-6: 0.75rem;
  --space-8: 1rem;
  --space-12: 1.5rem;
  --space-16: 2rem;
  --space-20: 2.5rem;
  --space-24: 3rem;
  --space-32: 4rem;

  /* Glassmorphism: surface-container at 60% opacity + 20px blur, for floating elements */
  --glass-bg: color-mix(in srgb, var(--surface-container) 60%, transparent);
  --glass-blur: 20px;

  /* Ambient shadow — never pure black; a tinted, low-opacity blur (never a hard drop shadow) */
  --shadow-ambient: 0 20px 60px -10px color-mix(in srgb, var(--primary) 8%, transparent);
}

body {
  background-color: var(--surface);
  color: var(--on-surface);
  font-family: var(--font-body);
}

.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 1.25rem;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-headline);
  letter-spacing: -0.02em;
}

.gradient-accent {
  background-image: linear-gradient(135deg, var(--primary), var(--secondary));
}

/* Combine with .gradient-accent to clip the gradient to text (e.g. dynamically
   injected MarkupString content, which scoped component CSS can't reach). */
.text-gradient-clip {
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.glass-panel {
  background-color: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
}

/* Shared static-marketing-page layout (About, For Clients, For Influencers) */
.static-hero,
.static-two-col,
.static-benefits,
.static-testimonials {
  max-width: 1280px;
  margin: 0 auto var(--space-32);
  padding: 0 var(--space-32);
}

.static-hero {
  text-align: center;
  max-width: 48rem;
  margin-top: 2rem;
}

.static-hero h1 {
  font-size: 3rem;
  line-height: 1.1;
  margin: var(--space-8) 0 var(--space-16);
}

.static-hero p {
  color: var(--on-surface-variant);
  font-size: 1.125rem;
  line-height: 1.6;
}

.static-two-col {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-16);
}

.static-two-col h3 {
  font-size: 1.5rem;
  margin: 0 0 var(--space-8);
}

.static-two-col p {
  color: var(--on-surface-variant);
  line-height: 1.6;
  margin: 0;
}

.static-benefits {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-16);
}

.static-benefits h3 {
  font-size: 1.375rem;
  margin: 0 0 var(--space-8);
}

.static-benefits p {
  color: var(--on-surface-variant);
  line-height: 1.6;
  margin: 0;
}

.static-testimonials {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-16);
}

.static-testimonial blockquote {
  font-style: italic;
  margin: 0 0 var(--space-16);
}

.static-testimonial p {
  color: var(--on-surface);
  font-weight: 700;
  margin: 0;
}

.static-testimonial span {
  color: var(--on-surface-variant);
  font-size: 0.875rem;
}

@media (min-width: 900px) {
  .static-hero h1 {
    font-size: 3.5rem;
  }

  .static-two-col {
    grid-template-columns: repeat(2, 1fr);
  }

  .static-benefits {
    grid-template-columns: repeat(2, 1fr);
  }

  .static-testimonials {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Shared auth form styling (Login, Forgot Password, Sign Up, Onboarding) */
.auth-form h1 {
  font-size: 1.75rem;
  margin: 0 0 var(--space-8);
}

.auth-form__subtitle {
  color: var(--on-surface-variant);
  margin: 0 0 var(--space-24);
}

.auth-form__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-bottom: var(--space-16);
}

.auth-form__field label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--on-surface-variant);
}

.auth-form__field input,
.auth-form__field select,
.auth-form__field textarea {
  width: 100%;
  box-sizing: border-box;
  background-color: var(--surface-container-low);
  border: none;
  border-radius: var(--radius-default);
  padding: var(--space-12);
  color: var(--on-surface);
  font-family: var(--font-body);
  font-size: 0.9375rem;
}

.auth-form__field input:focus,
.auth-form__field select:focus,
.auth-form__field textarea:focus {
  outline: 2px solid var(--primary);
}

.auth-form__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
}

@media (min-width: 480px) {
  .auth-form__row--2 {
    grid-template-columns: 1fr 1fr;
  }
}

.auth-form__error {
  background-color: color-mix(in srgb, var(--error) 12%, transparent);
  color: var(--error);
  padding: var(--space-12);
  border-radius: var(--radius-default);
  font-size: 0.875rem;
  margin-bottom: var(--space-16);
}

.auth-logo-picker {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  margin-bottom: var(--space-8);
}

.auth-logo-picker__preview {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--radius-default);
  background-color: var(--surface-container-high);
  color: var(--on-surface-variant);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}

.auth-logo-picker__preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.auth-logo-picker__btn {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  background-color: var(--surface-container-high);
  color: var(--on-surface);
  border-radius: var(--radius-default);
  padding: var(--space-8) var(--space-16);
  font-size: 0.8125rem;
  font-weight: 700;
  cursor: pointer;
}

.auth-logo-picker__btn:hover {
  color: var(--primary);
}

.auth-logo-picker__btn input[type="file"] {
  display: none;
}

.auth-form__footer {
  margin-top: var(--space-16);
  color: var(--on-surface-variant);
  font-size: 0.875rem;
}

.auth-form__footer a {
  color: var(--primary);
  font-weight: 600;
  text-decoration: none;
}

.auth-form__link-row {
  display: flex;
  justify-content: flex-end;
  margin-top: calc(-1 * var(--space-12));
  margin-bottom: var(--space-16);
}

.auth-form__link-row a {
  color: var(--primary);
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: none;
}

.onboarding-form {
  max-width: 32rem;
}

.onboarding-list {
  margin-top: var(--space-16);
}

.onboarding-list h4 {
  margin: 0 0 var(--space-8);
  color: var(--on-surface-variant);
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.onboarding-list__item {
  margin-bottom: var(--space-8);
  padding: var(--space-16) !important;
}

.onboarding-list__item p {
  color: var(--on-surface-variant);
  margin: var(--space-4) 0 0;
}

.onboarding-actions {
  display: flex;
  justify-content: space-between;
  gap: var(--space-12);
  margin-top: var(--space-24);
}

/* Shared per-page footer (KFooter + FooterColumn) */
.k-footer {
  background-color: var(--surface);
}

.k-footer__inner {
  background-color: var(--surface-container-low);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  padding: var(--space-32) var(--space-32) var(--space-16);
  max-width: 1280px;
  margin: 4rem auto 0;
}

.k-footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-24);
}

.k-footer__about {
  grid-column: 1 / -1;
}

.k-footer__brand {
  font-family: var(--font-headline);
  font-weight: 800;
  font-size: 1.25rem;
  color: var(--on-surface);
  display: block;
  margin-bottom: var(--space-8);
}

.k-footer__about p {
  color: var(--on-surface-variant);
  max-width: 24rem;
  font-size: 0.875rem;
  line-height: 1.6;
}

.k-footer__socials {
  display: flex;
  gap: var(--space-8);
  margin-top: var(--space-16);
}

.k-footer__social-icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-full);
  background-color: var(--surface-container-high);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  color: var(--on-surface-variant);
}

.k-footer__col h4 {
  color: var(--on-surface);
  font-weight: 700;
  margin: 0 0 var(--space-12);
  font-size: 0.9375rem;
}

.k-footer__col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.k-footer__col ul a {
  color: var(--on-surface-variant);
  text-decoration: none;
  font-size: 0.875rem;
}

.k-footer__col ul a:hover {
  color: var(--secondary);
}

.k-footer__bottom {
  margin-top: var(--space-32);
  padding-top: var(--space-16);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--outline-variant) 12%, transparent);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-12);
  text-align: center;
}

.k-footer__bottom p {
  color: var(--on-surface-variant);
  font-size: 0.875rem;
  margin: 0;
}

.k-footer__bottom-extra {
  display: flex;
  gap: var(--space-24);
  font-size: 0.75rem;
  color: var(--on-surface-variant);
}

@media (min-width: 900px) {
  .k-footer__grid {
    grid-template-columns: repeat(var(--footer-cols, 5), 1fr);
  }

  .k-footer__about {
    grid-column: span 2;
  }

  .k-footer__bottom {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
}

/* Ghost border fallback — only when accessibility truly requires an edge; never full-opacity */
.ghost-border {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--outline-variant) 18%, transparent);
}

/* Dark scrollbars everywhere — replaces the default light OS scrollbar on every portal */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--surface-bright) var(--surface-container-lowest);
}

*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

*::-webkit-scrollbar-track {
  background: var(--surface-container-lowest);
}

*::-webkit-scrollbar-thumb {
  background: var(--surface-bright);
  border-radius: var(--radius-full);
  border: 2px solid var(--surface-container-lowest);
}

*::-webkit-scrollbar-thumb:hover {
  background: var(--outline);
}