/* ════════════════════════════════════════════════════════════════════════
   PRO STAR TCN — DESIGN TOKENS (TikTok Pink + Cyan, Pink-Forward)
   ────────────────────────────────────────────────────────────────────────
   LIGHT mode = default for the whole system.
   Pink is the dominant brand color. Cyan is the second TikTok accent.
   Every color the system uses is a CSS variable so changes are global.
   ════════════════════════════════════════════════════════════════════════ */

:root,
[data-theme="light"] {
  /* ─── NEUTRAL PALETTE ─── */
  --white:        #FFFFFF;
  --black:        #000000;
  --near-black:   #0F1014;
  --neutral-25:   #FAFBFD;
  --neutral-50:   #F7F8FB;
  --neutral-100:  #F2F4F8;
  --neutral-150:  #ECEEF3;
  --neutral-200:  #E4E7EE;
  --neutral-300:  #D8DCE5;
  --neutral-400:  #B5BBC8;
  --neutral-500:  #9CA3B5;
  --neutral-600:  #6B7080;
  --neutral-700:  #4B5160;
  --neutral-800:  #2E3241;
  --neutral-900:  #18181F;
  --neutral-950:  #0F1014;

  /* ─── BRAND PALETTE — TikTok identity ─── */
  --pink-50:      #FFF1F4;
  --pink-100:     #FFE4EA;
  --pink-200:     #FFC3CF;
  --pink-300:     #FF8FA3;
  --pink-500:     #FE2C55;   /* TikTok red/pink */
  --pink-600:     #E6234A;
  --pink-700:     #C81C3F;
  --pink-800:     #9F1733;

  --cyan-50:      #ECFEFF;
  --cyan-100:     #CFFAFE;
  --cyan-200:     #A5F3FC;
  --cyan-300:     #67E8F9;
  --cyan-500:     #25F4EE;   /* TikTok cyan */
  --cyan-600:     #1FDCD6;
  --cyan-700:     #18B8B3;

  --purple-50:    #F5F3FF;
  --purple-100:   #EDE9FE;
  --purple-200:   #DDD6FE;
  --purple-500:   #7C4DFF;
  --purple-600:   #6238E0;
  --purple-700:   #4F2BC2;

  --indigo-50:    #EEF2FF;
  --indigo-100:   #E0E7FF;
  --indigo-200:   #C7D2FE;
  --indigo-300:   #A5B4FC;
  --indigo-500:   #6366F1;
  --indigo-600:   #4F46E5;
  --indigo-700:   #4338CA;

  --blue-grey:    #6B7299;

  /* ─── SEMANTIC STATUS PALETTE ─── */
  --green-50:     #F0FDF4;
  --green-100:    #DCFCE7;
  --green-500:    #10B981;
  --green-600:    #16A34A;
  --green-700:    #047857;
  --green-800:    #065F46;

  --red-50:       #FEF2F2;
  --red-100:      #FEE2E2;
  --red-200:      #FECACA;
  --red-500:      #EF4444;
  --red-600:      #DC2626;
  --red-700:      #B91C1C;
  --red-800:      #991B1B;

  --amber-50:     #FEF9E7;
  --amber-100:    #FEF3C7;
  --amber-200:    #FDE68A;
  --amber-500:    #F59E0B;
  --amber-700:    #B45309;
  --amber-800:    #854D0E;

  /* ─── SEMANTIC ALIASES ─── */
  --bg-main:        var(--neutral-50);
  --bg-secondary:   var(--white);
  --bg-card:        var(--white);
  --bg-hover:       var(--neutral-100);
  --bg-input:       var(--neutral-50);
  --bg-elevated:    var(--white);
  --bg-darker:      var(--neutral-150);
  --bg-overlay:     rgba(15,23,42,0.45);

  --bg-sidebar:           var(--white);
  --bg-sidebar-hover:     var(--neutral-100);
  --bg-sidebar-active:    rgba(254,44,85,0.10);
  --sidebar-text:         var(--neutral-900);
  --sidebar-text-muted:   var(--neutral-600);
  --sidebar-active-text:  var(--pink-500);
  --sidebar-divider:      var(--neutral-150);
  --sidebar-section-label:var(--neutral-500);

  /* Brand */
  --primary:         var(--pink-500);
  --primary-hover:   var(--pink-600);
  --primary-deep:    var(--pink-700);
  --primary-soft:    rgba(254,44,85,0.07);
  --primary-glow:    rgba(254,44,85,0.20);

  --secondary:       var(--cyan-500);
  --secondary-hover: var(--cyan-600);
  --secondary-deep:  var(--cyan-700);
  --secondary-soft:  rgba(37,244,238,0.08);
  --secondary-glow:  rgba(37,244,238,0.20);

  --accent:          var(--purple-500);
  --accent-hover:    var(--purple-600);
  --accent-soft:     rgba(124,77,255,0.07);

  /* Text */
  --text-main:       var(--neutral-950);
  --text-secondary:  var(--neutral-700);
  --text-muted:      var(--neutral-600);
  --text-disabled:   var(--neutral-400);
  --text-on-primary: var(--white);
  --text-on-dark:    var(--white);
  --text-link:       var(--pink-500);

  /* Borders */
  --border-main:   var(--neutral-300);
  --border-soft:   var(--neutral-150);
  --border-strong: var(--neutral-400);

  /* Status */
  --success:    var(--green-600);
  --warning:    var(--amber-500);
  --danger:     var(--red-600);
  --info:       var(--cyan-500);
  --success-bg: var(--green-100);
  --success-fg: var(--green-800);
  --warning-bg: var(--amber-100);
  --warning-fg: var(--amber-800);
  --danger-bg:  var(--red-100);
  --danger-fg:  var(--red-800);
  --info-bg:    var(--cyan-100);
  --info-fg:    var(--cyan-700);

  /* Effects */
  --shadow-main:  0 4px 12px rgba(15,23,42,0.05);
  --shadow-card:  0 1px 3px rgba(15,23,42,0.04);
  --shadow-modal: 0 20px 50px rgba(15,23,42,0.15);
  --glow-pink:    0 0 10px rgba(254,44,85,0.15);
  --glow-cyan:    0 0 10px rgba(37,244,238,0.15);
  --glow-purple:  0 0 10px rgba(124,77,255,0.10);

  /* Gradients — flattened to solid colours per agency feedback.
     Variables are kept (not removed) so existing references keep working;
     they just no longer paint a rainbow. */
  --gradient-brand:      #FE2C55;
  --gradient-brand-soft: rgba(254,44,85,0.08);
  --gradient-card:       #FFFFFF;

  /* Tier badges */
  --tier-bronze-bg: #FDE4C8;
  --tier-bronze-fg: #92400E;
  --tier-silver-bg: var(--neutral-150);
  --tier-silver-fg: var(--neutral-700);
  --tier-gold-bg:   var(--amber-100);
  --tier-gold-fg:   var(--amber-800);
  --tier-diamond-bg:var(--purple-100);
  --tier-diamond-fg:var(--purple-700);

  /* Typography */
  --font-display:  'Cairo', 'Tajawal', 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --fs-base:       15px;
  --fs-sm:         13px;
  --fs-xs:         12px;
  --fs-lg:         17px;
  --fs-h3:         20px;
  --fs-h2:         24px;
  --fs-h1:         28px;
  --fs-display:    34px;

  --fw-regular:    500;
  --fw-medium:     600;
  --fw-bold:       700;
  --fw-black:      800;

  --icon-size:     20px;
  --icon-size-lg:  24px;
  --icon-size-sm:  16px;

  /* Card accent stripe — OFF by default for calmer cards.
     Pages opt-in by referencing these vars in their own CSS. */
  --card-accent-color:    transparent;
  --card-accent-width:    0;
  --card-accent-display:  none;
}

/* ─── DARK MODE ──────────────────────────────────────────────────────── */
[data-theme="dark"] {
  --bg-main:        #0F0F10;
  --bg-secondary:   #161823;
  --bg-card:        #1E1F2A;
  --bg-hover:       #2A2B39;
  --bg-input:       #20222E;
  --bg-elevated:    #232539;
  --bg-darker:      #08080A;
  --bg-overlay:     rgba(0,0,0,0.65);

  --bg-sidebar:           #161823;
  --bg-sidebar-hover:     #2A2B39;
  --bg-sidebar-active:    rgba(254,44,85,0.18);
  --sidebar-text:         #F4F5F7;
  --sidebar-text-muted:   #9CA0AE;
  --sidebar-active-text:  #FE2C55;
  --sidebar-divider:      #2E3241;
  --sidebar-section-label:#6B7080;

  --primary:        #FE2C55;
  --primary-hover:  #FF466A;
  --primary-deep:   #C81C3F;
  --primary-soft:   rgba(254,44,85,0.16);
  --primary-glow:   rgba(254,44,85,0.30);

  --secondary:      #25F4EE;
  --secondary-hover:#5FF7F2;
  --secondary-deep: #18B8B3;
  --secondary-soft: rgba(37,244,238,0.16);
  --secondary-glow: rgba(37,244,238,0.30);

  --accent:         #7C4DFF;
  --accent-hover:   #9670FF;
  --accent-soft:    rgba(124,77,255,0.16);

  --text-main:       #F8F9FB;
  --text-secondary:  #D1D5E0;
  --text-muted:      #9CA3B5;
  --text-disabled:   #6E7388;

  --border-main:   #2E3241;
  --border-soft:   #1E1F2A;
  --border-strong: #4A5060;

  --success:    #22C55E;
  --warning:    #FACC15;
  --danger:     #EF4444;
  --info:       #25F4EE;
  --success-bg: rgba(34,197,94,0.16);
  --success-fg: #4ADE80;
  --warning-bg: rgba(250,204,21,0.16);
  --warning-fg: #FDE047;
  --danger-bg:  rgba(239,68,68,0.16);
  --danger-fg:  #FCA5A5;
  --info-bg:    rgba(37,244,238,0.16);
  --info-fg:    #7DD3FC;

  --shadow-main:  0 6px 18px rgba(0,0,0,0.25);
  --shadow-card:  0 2px 8px rgba(0,0,0,0.30);
  --shadow-modal: 0 20px 50px rgba(0,0,0,0.50);
  --glow-pink:    0 0 12px rgba(254,44,85,0.20);
  --glow-cyan:    0 0 12px rgba(37,244,238,0.20);
  --glow-purple:  0 0 12px rgba(124,77,255,0.18);
}

/* ─── BASE OVERRIDES ─────────────────────────────────────────────────── */
html { font-size: var(--fs-base); }
html, body {
  background: var(--bg-main);
  color: var(--text-main);
  transition: background-color 0.2s ease, color 0.2s ease;
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
}

h1 { font-size: var(--fs-h1); font-weight: var(--fw-black); line-height: 1.25; }
h2 { font-size: var(--fs-h2); font-weight: var(--fw-bold);  line-height: 1.30; }
h3 { font-size: var(--fs-h3); font-weight: var(--fw-bold);  line-height: 1.35; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }
::-webkit-scrollbar-track { background: var(--bg-darker); }

::selection { background: var(--primary-soft); color: var(--text-main); }

/* Lucide icons — click-through + size */
[data-lucide], .lucide, svg.lucide,
button > svg, button > i[data-lucide],
a > svg, a > i[data-lucide],
label > svg, label > i[data-lucide] {
  pointer-events: none;
}
[data-lucide] {
  width:  var(--icon-size);
  height: var(--icon-size);
  stroke-width: 2;
  color: currentColor;
  display: inline-block;
  vertical-align: -3px;
}
.icon-lg [data-lucide], [data-lucide].lg { width: var(--icon-size-lg); height: var(--icon-size-lg); }
.icon-sm [data-lucide], [data-lucide].sm { width: var(--icon-size-sm); height: var(--icon-size-sm); }

/* ─── UTILITY CLASSES ─────────────────────────────────────────────────── */
.brand-gradient-text {
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.brand-gradient-bg { background: var(--gradient-brand); color: var(--text-on-primary); }

.text-primary   { color: var(--primary) !important; }
.text-secondary { color: var(--secondary) !important; }
.text-accent    { color: var(--accent) !important; }
.text-muted     { color: var(--text-muted) !important; }

.bg-card     { background: var(--bg-card) !important; }
.bg-elevated { background: var(--bg-elevated) !important; }

.shadow-card  { box-shadow: var(--shadow-card); }
.shadow-modal { box-shadow: var(--shadow-modal); }
.glow-pink    { box-shadow: var(--glow-pink); }
.glow-cyan    { box-shadow: var(--glow-cyan); }

/* ─── INPUTS (universal) ──────────────────────────────────────────────── */
input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="search"], input[type="tel"],
input[type="url"], input[type="date"], input[type="time"],
input[type="datetime-local"], input[type="month"], select, textarea,
.tt-input, .tt-select, .tt-textarea {
  background: var(--bg-input);
  color: var(--text-main);
  border: 1px solid var(--border-main);
  border-radius: 10px;
  padding: 9px 12px;
  font: inherit;
  font-size: var(--fs-sm);
  outline: none;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
  max-width: 100%;
}
input:focus, select:focus, textarea:focus,
.tt-input:focus, .tt-select:focus, .tt-textarea:focus {
  border-color: var(--primary);
  background: var(--bg-card);
  box-shadow: 0 0 0 3px var(--primary-soft);
}
input::placeholder, textarea::placeholder {
  color: var(--text-muted);
  opacity: 1;
}

/* ─── COMPONENT HOOKS ─────────────────────────────────────────────────── */
.tt-card {
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  padding: 18px;
  color: var(--text-main);
  box-shadow: var(--shadow-card);
}
.tt-btn {
  background: var(--primary);
  color: var(--text-on-primary);
  border: none;
  border-radius: 10px;
  padding: 11px 18px;
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: transform 0.15s, box-shadow 0.15s, opacity 0.15s, background 0.15s;
}
.tt-btn:hover { background: var(--primary-hover); box-shadow: var(--glow-pink); transform: translateY(-1px); }
.tt-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.tt-btn-ghost {
  background: transparent;
  color: var(--primary);
  border: 1px solid var(--primary);
  border-radius: 10px;
  padding: 10px 16px;
  font: inherit;
  font-weight: var(--fw-bold);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.tt-btn-ghost:hover { background: var(--primary-soft); }

.tt-theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  background: var(--bg-input);
  color: var(--text-main);
  border: 1px solid var(--border-main);
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.tt-theme-toggle:hover { background: var(--primary-soft); color: var(--primary); border-color: var(--primary); }