/* PandaHub v2: a new identity.
   Warm paper + ink with one electric-violet accent and a lime highlight. Bricolage Grotesque for display, Inter for text.
   Rounded-square (squircle) people, hairline borders instead of shadows, editorial type, big artwork. Light by default,
   dark is its own considered palette (not an inversion). Loaded last; owns tokens, buttons, chips, cards, forms. */

/* ====================================================================== tokens */
:root {
  --font: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: 'Bricolage Grotesque', 'Inter', system-ui, -apple-system, "Segoe UI", sans-serif;

  color-scheme: dark;
  --bg: #0f0f12; --surface: #17171b; --surface-2: #212126; --surface-3: #2c2c33;
  --material: rgb(15 15 18 / .82);
  --text: #f4f2ec; --text-2: rgb(244 242 236 / .72); --text-3: rgb(244 242 236 / .6);
  --sep: rgb(244 242 236 / .12); --fill: rgb(244 242 236 / .07); --fill-hover: rgb(244 242 236 / .12);
  --accent: #8c7bff; --accent-text: #b3a8ff; --on-accent: #0f0f12;
  --lime: #d4ff3d; --on-lime: #15130e;
  --danger: #ff6b5e; --danger-text: #ff8a7f; --success-text: #5ddc8f;
  --shadow-pop: 0 24px 60px rgb(0 0 0 / .5), 0 0 0 1px rgb(244 242 236 / .1);
  --card-border: 1px solid var(--sep);

  --r-xs: 8px; --r-sm: 12px; --r-md: 16px; --r-lg: 22px; --r-xl: 30px; --r-full: 999px;
  --gutter: 20px;
}
@media (min-width: 600px) { :root { --gutter: 28px; } }
@media (min-width: 1180px) { :root { --gutter: 40px; } }

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]):not([data-theme="black"]) {
    color-scheme: light;
    --bg: #f6f4ee; --surface: #ffffff; --surface-2: #efece4; --surface-3: #e4e0d4;
    --material: rgb(246 244 238 / .84);
    --text: #15130e; --text-2: rgb(21 19 14 / .74); --text-3: rgb(21 19 14 / .66);
    --sep: rgb(21 19 14 / .12); --fill: rgb(21 19 14 / .055); --fill-hover: rgb(21 19 14 / .1);
    --accent: #5b3df5; --accent-text: #4a2ee0; --on-accent: #fff;
    --danger: #d92d20; --danger-text: #b3201a; --success-text: #15683a;
    --shadow-pop: 0 24px 60px rgb(21 19 14 / .18), 0 0 0 1px rgb(21 19 14 / .08);
  }
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f6f4ee; --surface: #ffffff; --surface-2: #efece4; --surface-3: #e4e0d4;
  --material: rgb(246 244 238 / .84);
  --text: #15130e; --text-2: rgb(21 19 14 / .74); --text-3: rgb(21 19 14 / .66);
  --sep: rgb(21 19 14 / .12); --fill: rgb(21 19 14 / .055); --fill-hover: rgb(21 19 14 / .1);
  --accent: #5b3df5; --accent-text: #4a2ee0; --on-accent: #fff;
  --danger: #d92d20; --danger-text: #b3201a; --success-text: #15683a;
  --shadow-pop: 0 24px 60px rgb(21 19 14 / .18), 0 0 0 1px rgb(21 19 14 / .08);
}
:root[data-theme="black"] { --bg: #000; --surface: #0b0b0d; --surface-2: #151518; --surface-3: #232328; --material: rgb(0 0 0 / .84); }
:root[data-accent="blue"] { --accent: #0a6fe0; --accent-text: #0a5bc0; }
:root[data-accent="green"] { --accent: #178a3a; --accent-text: #11692c; }
:root[data-accent="orange"] { --accent: #e86a00; --accent-text: #b85200; --on-accent: #fff; }
:root[data-accent="purple"] { --accent: #8a45f0; --accent-text: #6f2fd0; }
:root[data-accent="mono"] { --accent: #55555b; --accent-text: #3d3d42; --on-accent: #fff; }
@media (prefers-color-scheme: dark) { :root[data-accent="blue"]:not([data-theme="light"]) { --accent-text: #7fb6ff; } :root[data-accent="green"]:not([data-theme="light"]) { --accent-text: #6fe08f; } :root[data-accent="orange"]:not([data-theme="light"]) { --accent-text: #ffa24d; } :root[data-accent="purple"]:not([data-theme="light"]) { --accent-text: #c3a1ff; } :root[data-accent="mono"]:not([data-theme="light"]) { --accent-text: #bdbdc4; } }
:root[data-theme="dark"][data-accent="blue"], :root[data-theme="black"][data-accent="blue"] { --accent-text: #7fb6ff; }

/* the artwork-led pages keep a dark stage; they set their own text colours */
.artist { color-scheme: dark; --bg: #0f0f12; --surface: #17171b; --surface-2: #212126; --surface-3: #2c2c33; --text: #f4f2ec; --text-2: rgb(244 242 236 / .72); --text-3: rgb(244 242 236 / .6); --sep: rgb(244 242 236 / .12); --fill: rgb(244 242 236 / .07); --fill-hover: rgb(244 242 236 / .12); --accent-text: #b3a8ff; }

body { font-family: var(--font); font-size: 16px; line-height: 1.5; letter-spacing: -.005em; font-feature-settings: 'cv11', 'ss03'; }
h1, h2, h3 { font-family: var(--font-display); letter-spacing: -.035em; }

/* ====================================================================== buttons */
.btn { border-radius: 14px; min-height: 46px; padding: 0 22px; font-size: 15px; font-weight: 650; letter-spacing: -.01em; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.btn--primary { background: var(--text); color: var(--bg); box-shadow: none; }
.btn--primary:hover { filter: none; background: color-mix(in srgb, var(--text) 86%, var(--accent)); }
.btn--ink { background: var(--text); color: var(--bg); }
.btn--accent { background: var(--accent); color: var(--on-accent); }
.btn--tint { background: var(--surface); color: var(--text); box-shadow: inset 0 0 0 1px var(--sep); -webkit-backdrop-filter: none; backdrop-filter: none; }
.btn--tint:hover { background: var(--surface-2); }
.btn--tint[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); box-shadow: none; }
.btn--quiet { background: transparent; color: var(--text); }
.btn--quiet:hover { background: var(--fill); }
.btn--light { background: #fff; color: #15130e; }
.btn--danger { background: transparent; color: var(--danger-text); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--danger) 45%, transparent); }
.btn--danger:hover { background: color-mix(in srgb, var(--danger) 12%, transparent); }
.btn--sm { min-height: 38px; padding: 0 16px; font-size: 14px; border-radius: 12px; }
.btn--block { width: 100%; }
.icon-btn, .round-btn { border-radius: 50%; }
.round-btn { background: var(--fill); }

/* ====================================================================== chips, tabs, segmented */
.chip { min-height: 36px; padding: 0 14px; border-radius: 10px; background: transparent; box-shadow: inset 0 0 0 1px var(--sep); font-size: 14px; font-weight: 600; color: var(--text); }
.chip:not([aria-pressed="true"]):not([aria-current="true"]):hover { background: var(--fill); }
.chip[aria-pressed="true"], .chip[aria-current="true"] { background: var(--text); color: var(--bg); box-shadow: none; }
.chip-n { opacity: .7; font-weight: 500; }
.segmented { padding: 4px; border-radius: 14px; background: var(--fill); }
.segmented button, .segmented a { border-radius: 10px; min-height: 36px; font-weight: 600; }
.segmented button[aria-pressed="true"], .segmented a[aria-current="true"] { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgb(0 0 0 / .12), inset 0 0 0 1px var(--sep); }
.select-btn { border-radius: 12px; box-shadow: inset 0 0 0 1px var(--sep); background: var(--surface); }

/* ====================================================================== people: squircles */
.avatar { border-radius: 32%; }
.avatar--round { border-radius: 50%; }

/* ====================================================================== section headings */
.section { margin-top: var(--s12); }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s4); margin-bottom: var(--s5); }
.section-head h2 { font-size: clamp(26px, 3.4vw, 34px); font-weight: 800; letter-spacing: -.045em; line-height: 1; }
.section-head h2 a { display: inline-flex; align-items: center; gap: 4px; }
.section-head h2 a .icon { width: 26px; height: 26px; font-size: 26px; color: var(--accent-text); transition: transform var(--t-base) var(--ease-out); }
.section-head h2 a:hover .icon { transform: translateX(4px); }
.section-head .count { margin-left: auto; color: var(--text-3); font: 600 15px var(--font); }
@media (min-width: 820px) { .section { margin-top: 88px; } }

/* ====================================================================== forms */
.field > label, .field > legend { font-size: 13px; font-weight: 650; letter-spacing: .01em; color: var(--text-2); }
.field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), .field textarea, .link-edit-row input { background: var(--surface); box-shadow: inset 0 0 0 1px var(--sep); border-radius: 14px; min-height: 50px; }
.field input:focus-visible, .field textarea:focus-visible, .link-edit-row input:focus-visible { box-shadow: inset 0 0 0 1px var(--accent), 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); }
select:not(.select-btn select) { background-color: var(--surface); box-shadow: inset 0 0 0 1px var(--sep); border-radius: 14px; min-height: 50px; }
input[type="date"], input[type="datetime-local"], input[type="time"] { background: var(--surface); box-shadow: inset 0 0 0 1px var(--sep); border-radius: 14px; min-height: 50px; }
input[type="checkbox"]:not(.switch):checked { background-color: var(--accent); border-color: var(--accent); }
input[type="file"]::file-selector-button { border-radius: 12px; background: var(--text); color: var(--bg); }
input[type="file"]::file-selector-button:hover { background: color-mix(in srgb, var(--text) 85%, var(--accent)); }
.switch:checked { background: var(--accent); }
.form-error { color: var(--danger-text); }
.form-ok { color: var(--success-text); }

/* ====================================================================== status + small marks */
.status { border-radius: 8px; font-size: 11px; }
.status--published { background: color-mix(in srgb, var(--success-text) 16%, transparent); color: var(--success-text); }
.verified { color: var(--accent-text); }
.rel-badge, .new-chip { background: var(--lime); color: var(--on-lime); border-radius: 8px; font-weight: 700; }
.bell-dot, .side-badge { background: var(--accent); color: var(--on-accent); }

/* ====================================================================== empty states, toast, groups */
.empty { padding: var(--s12) var(--s5); }
.empty > .icon { color: var(--accent-text); }
.group { border-radius: 20px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--sep); overflow: hidden; }
.toast { border-radius: 14px; }