/* creators — palette overrides + light theme + app components.
   Loads after kynship-ui.css, so these vars win. Accent: dark orange. */

:root {
  --grn:        #E8762C;   /* accent (dark orange, readable on dark) */
  --grn-deep:   #C2410C;
  --accent-ink: #FFF7EF;   /* text on solid accent */
}

html[data-theme="light"] {
  --bg:        #F7F4EE;    /* warm off-white, per the brief */
  --panel:     #FFFFFF;
  --panel-2:   #F1EDE3;
  --panel-3:   #E8E2D4;
  --line:      #E1DBCC;
  --fg:        #26231D;
  --fg-dim:    #6D675B;
  --fg-faint:  #A29B8B;
  --grn:       #C2410C;    /* deeper orange holds contrast on light */
  --grn-deep:  #9A3412;
  --accent-ink:#FFF7EF;
}

/* Soften the dark-tuned shadows and glass on light surfaces. */
html[data-theme="light"] .panel {
  box-shadow: 0 1px 2px rgba(60, 50, 30, 0.06), 0 4px 14px rgba(60, 50, 30, 0.06);
}
html[data-theme="light"] .glass {
  background: rgba(247, 244, 238, 0.85);
}
html[data-theme="light"] .btn-accent:hover { background: var(--grn-deep); }
html[data-theme="light"] .spinner { border-color: rgba(0, 0, 0, 0.15); border-top-color: var(--grn); }
html[data-theme="light"] .loading-overlay { background: rgba(247, 244, 238, 0.72); }
html[data-theme="light"] ::-webkit-scrollbar-track { background: var(--bg); }
html[data-theme="light"] table.tbl tbody tr:hover { background: rgba(0, 0, 0, 0.025); }
html[data-theme="light"] .chip-amber { color: #92600a; border-color: rgba(146, 96, 10, 0.35);
                                       background: rgba(146, 96, 10, 0.08); }
html[data-theme="light"] .tip-portal { box-shadow: 0 10px 30px rgba(60, 50, 30, 0.18); }

/* Theme toggle icon swap */
.theme-icon-light { display: none; }
html[data-theme="light"] .theme-icon-dark { display: none; }
html[data-theme="light"] .theme-icon-light { display: inline; }

/* Form control baseline (kynship-ui styles the elements; this sets sizing) */
.input { font-size: 13px; padding: 7px 10px; }

/* Creator cards */
.creator-card { display: block; cursor: pointer; }
.creator-card .avatar-img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
                            border-radius: 10px 10px 0 0; display: block;
                            background: var(--panel-2); }
.avatar-fallback { display: flex; align-items: center; justify-content: center;
                   font-family: Poppins, sans-serif; font-weight: 700;
                   color: var(--fg-faint); background:
                   linear-gradient(135deg, var(--panel-2), var(--panel-3)); }

/* Sortable table headers */
th a { color: inherit; text-decoration: none; }
th a:hover { color: var(--fg); }

/* ── Status chips — one hue per relationship/review status ───────────── */
.st-active      { color:#4ade80; border-color:rgba(74,222,128,.35);  background:rgba(74,222,128,.08); }
.st-prospect    { color:#fbbf24; border-color:rgba(251,191,36,.35);  background:rgba(251,191,36,.08); }
.st-contacted   { color:#60a5fa; border-color:rgba(96,165,250,.35);  background:rgba(96,165,250,.08); }
.st-interested  { color:#22d3ee; border-color:rgba(34,211,238,.35);  background:rgba(34,211,238,.08); }
.st-past        { color:#fb7185; border-color:rgba(251,113,133,.35); background:rgba(251,113,133,.08); }
.st-new         { color:#fbbf24; border-color:rgba(251,191,36,.35);  background:rgba(251,191,36,.08); }
.st-promoted    { color:#4ade80; border-color:rgba(74,222,128,.35);  background:rgba(74,222,128,.08); }
.st-rejected    { color:#fb7185; border-color:rgba(251,113,133,.35); background:rgba(251,113,133,.08); }

html[data-theme="light"] .st-active,
html[data-theme="light"] .st-promoted   { color:#15803d; border-color:rgba(21,128,61,.35);  background:rgba(21,128,61,.07); }
html[data-theme="light"] .st-prospect,
html[data-theme="light"] .st-new        { color:#92600a; border-color:rgba(146,96,10,.35);  background:rgba(146,96,10,.07); }
html[data-theme="light"] .st-contacted  { color:#1d4ed8; border-color:rgba(29,78,216,.35);  background:rgba(29,78,216,.07); }
html[data-theme="light"] .st-interested { color:#0e7490; border-color:rgba(14,116,144,.35); background:rgba(14,116,144,.07); }
html[data-theme="light"] .st-past,
html[data-theme="light"] .st-rejected   { color:#be123c; border-color:rgba(190,18,60,.35);  background:rgba(190,18,60,.07); }

/* Live-search feedback */
#results.searching { opacity: .55; transition: opacity .15s ease; }