/* Kolsquare CI theme for the Paris Creator Week brand portal.
   Source of truth: "Design Tokens kolsquare CI" (Resources). Loaded AFTER each page's
   inline <style>, so it wins on equal specificity. Vincent's markup and scripts stay as
   they are; only his CSS variables are remapped and a handful of rules overridden. */

:root{
  /* ---- Tokens ---- */
  --ks-dark:#0C2329;    /* Dark Green: text, structure, dark sections (replaces black) */
  --ks-mint:#86FFBD;    /* Aquamarine: primary CTAs, interaction, active states */
  --ks-indigo:#9D84FF;  /* Indigo: secondary structure, non-CTA highlights */
  --ks-blue:#68CAFF;    /* Uranian Blue: data only (KPIs, scores, sliders) */
  --ks-pink:#FF74D1;    /* Persian Pink: community accent, sparingly (favorites) */
  --ks-orange:#FF9263;  /* Atomic Tangerine: attention accent, sparingly (warnings, rank 1) */

  /* ---- Tints, 20 % steps on white ---- */
  --ks-dark-80:#3D4F54; --ks-dark-60:#6D7B7F; --ks-dark-40:#9EA7A9; --ks-dark-20:#CED3D4;
  --ks-mint-40:#CFFFE5; --ks-mint-20:#E7FFF2;
  --ks-blue-60:#A4DFFF; --ks-blue-20:#E1F4FF;
  --ks-indigo-20:#EBE6FF;
  --ks-pink-20:#FFE3F6;
  --ks-orange-40:#FFD3C1; --ks-orange-20:#FFE9E0;

  /* Surfaces: Dark Green with alpha, reads as a light tint on white */
  --ks-surface-1:rgba(12,35,41,0.04);
  --ks-surface-2:rgba(12,35,41,0.07);
  --ks-line:rgba(12,35,41,0.12);

  /* ---- Vincent's variables, remapped ---- */
  --green-050:var(--ks-mint-20); --green-100:var(--ks-mint-40);
  --green-400:var(--ks-mint); --green-500:var(--ks-mint); --green-600:var(--ks-mint);
  --green-700:var(--ks-dark); --green-800:var(--ks-dark);

  --blue-050:var(--ks-blue-20); --blue-100:var(--ks-blue-60); --blue-500:var(--ks-blue);
  --blue-700:var(--ks-dark); --blue-800:var(--ks-dark);

  --navy-025:var(--ks-surface-1); --navy-040:var(--ks-surface-2); --navy-050:var(--ks-surface-2);
  --navy-100:var(--ks-line); --navy-200:var(--ks-dark-20);
  --navy-300:var(--ks-dark-40); --navy-400:var(--ks-dark-60); --navy-500:var(--ks-dark-60);
  --navy-600:var(--ks-dark-80); --navy-700:var(--ks-dark-80); --navy-800:var(--ks-dark);
  --navy-900:var(--ks-dark);

  --orange-100:var(--ks-orange-20); --orange-700:var(--ks-orange); --orange-800:var(--ks-dark);

  /* No gradients: the two gradient variables become flat Aquamarine */
  --ks-bg-1:var(--ks-mint-20); --ks-bg-2:var(--ks-mint-20);
  --ks-gradient:var(--ks-mint);
  --ks-gradient-btn:var(--ks-mint);

  --shadow-card:0 1px 2px rgba(12,35,41,0.05), 0 6px 20px rgba(12,35,41,0.06);
  --shadow-hover:0 2px 4px rgba(12,35,41,0.06), 0 12px 28px rgba(12,35,41,0.10);
}

/* ---- Typography ---- */
body, button, input, select, textarea{
  font-family:'Bricolage Grotesque', Arial, sans-serif;
}
body{ background:#fff; color:var(--ks-dark); }

/* ---- Header: calm Aquamarine tint band, Dark Green text, flat ---- */
header.topbar{ background:var(--ks-mint-20); }
.x-badge{ background:var(--ks-indigo); color:var(--ks-dark); }

/* ---- Primary CTAs: Aquamarine with Dark Green text, hover inverts ---- */
#submitBtn, .cta-btn, .demo-btn, .portal-tab.active, .status-tab.active{
  background:var(--ks-mint); color:var(--ks-dark);
}
#submitBtn:hover:not(:disabled), .cta-btn:hover, .demo-btn:hover,
.creator-card:hover .cta-btn, .kol-row:hover .cta-btn{
  background:var(--ks-dark); color:#fff; opacity:1;
}
.demo-btn{ animation:none; box-shadow:none; }
.demo-btn:hover{ transform:translateY(-1px); box-shadow:none; }
.demo-line{ border-color:var(--ks-line); box-shadow:var(--shadow-card); }
.status-tab.active .status-tab-count{ background:rgba(255,255,255,0.55); color:var(--ks-dark); }
.portal-nav{ background:#fff; border-color:var(--ks-line); }

/* ---- Cards ---- */
.card, .filters, .creator-card, .kol-row{ border:1px solid var(--ks-line); }

/* ---- Inputs: Aquamarine focus ring ---- */
#email:focus, #search:focus, select#sortSelect:focus{
  border-color:var(--ks-mint); box-shadow:0 0 0 3px var(--ks-mint-40); outline:none;
}

/* ---- Messages ---- */
.result.success{
  color:var(--ks-dark); background:var(--ks-mint-20); border:1px solid var(--ks-mint);
  border-radius:var(--radius-m); padding:12px 14px;
}
.result.error{
  color:var(--ks-dark); background:var(--ks-orange-20); border:1px solid var(--ks-orange);
  border-radius:var(--radius-m); padding:12px 14px;
}
.result p{ margin:0; }
.result p + .demo-box{ margin-top:12px; }
.demo-box{ background:#fff; }
.perks li::before{ color:var(--ks-dark); }

/* ---- Data elements: Uranian Blue only ---- */
.creator-count-badge{ background:var(--ks-mint-20); border-color:var(--ks-mint); color:var(--ks-dark); }
.creator-count-badge b{ color:var(--ks-dark); }
.quality-badge.excellent{ background:var(--ks-blue); color:var(--ks-dark); }
.quality-badge.good{ background:var(--ks-blue-60); color:var(--ks-dark); }
.quality-badge.average{ background:var(--ks-blue-20); color:var(--ks-dark); }
.cf-track-base{ background:var(--ks-blue-20); }
.cf-track-vivid{ background:var(--ks-blue); }
.cf-handle{ background:var(--ks-dark); border-color:#fff; box-shadow:0 1px 4px rgba(12,35,41,0.25); }

/* ---- Ranking: Atomic Tangerine only for the top spot ---- */
.rank-badge.gold{ background:var(--ks-orange); color:var(--ks-dark); }
.rank-badge.silver{ background:var(--ks-dark-20); color:var(--ks-dark); }
.rank-badge.bronze{ background:var(--ks-orange-40); color:var(--ks-dark); }

/* ---- Favorites: Persian Pink (community accent) ---- */
.icon-fav-btn:hover, .fav-btn:hover{ border-color:var(--ks-pink); color:var(--ks-pink); background:var(--ks-pink-20); }
.icon-fav-btn.active, .fav-btn.active{ border-color:var(--ks-pink); color:var(--ks-pink); background:var(--ks-pink-20); }

/* ---- Reject / clear: Atomic Tangerine instead of red ---- */
.reject-btn:hover{ border-color:var(--ks-orange); color:var(--ks-dark); background:var(--ks-orange-20); }
.reject-btn.active{ border-color:var(--ks-orange); color:var(--ks-dark); background:var(--ks-orange-40); }
.cf-trash{ display:inline-flex; align-items:center; }
.cf-trash svg{ width:16px; height:16px; }
.cf-trash:hover{ color:var(--ks-orange); }

/* ---- Icons: Heroicons outline, Dark Green ---- */
.search-icon{ color:var(--ks-dark-60); }
.status-tab svg{ width:14px; height:14px; flex-shrink:0; }
.status-tab[data-view="favorites"].active svg, .status-tab[data-status="favorite"].active svg{ color:var(--ks-pink); }

/* ---- Links & footer ---- */
#stateBox a{ color:var(--ks-dark); text-decoration:underline; text-decoration-color:var(--ks-mint); text-underline-offset:2px; }
footer{ color:var(--ks-dark-60); }
footer b{ color:var(--ks-dark); }