/*
 * Social Liberty theme for pretalx public pages, matching social-liberty.org
 * (frontend/app/globals.css + layout.tsx in the social-liberty repo):
 *   - near-black zinc background, zinc-100 text
 *   - accent #ff7f2a (sampled from the rose logo), in-text links #ffbf95
 *   - Source Serif 4 headings, Inter body, Geist Mono labels
 *
 * This file is linked from <head> *before* pretalx's own stylesheets, so the
 * variable block uses :root:root to outrank pretalx's :root definitions.
 */

/* ---------- fonts (SIL OFL 1.1, see fonts/*-OFL.txt) ---------- */
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("fonts/source-serif-4-latin-wght-normal.fb34450b3254.woff2") format("woff2");
}
@font-face {
  font-family: "Source Serif 4";
  font-style: italic;
  font-weight: 200 900;
  font-display: swap;
  src: url("fonts/source-serif-4-latin-wght-italic.9be147cef3b5.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/inter-latin-wght-normal.260c81a4759b.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/inter-latin-wght-italic.0a81fe197e0d.woff2") format("woff2");
}
@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/geist-mono-latin-wght-normal.a15f9d568fb0.woff2") format("woff2");
}

/* ---------- palette ---------- */
:root:root {
  --sl-bg: #09090b;          /* zinc-950: page */
  --sl-surface: #18181b;     /* zinc-900: cards, inputs */
  --sl-surface-2: #27272a;   /* zinc-800: hover, table headers, borders */
  --sl-line: #3f3f46;        /* zinc-700 */
  --sl-text: #f4f4f5;        /* zinc-100 */
  --sl-text-body: #e4e4e7;   /* zinc-200 */
  --sl-muted: #a1a1aa;       /* zinc-400 */
  --sl-accent: #ff7f2a;
  --sl-accent-soft: #7a3c14;
  --sl-link: #ffbf95;
  --sl-sky: #2e6f8e;

  --sl-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --sl-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --sl-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  color-scheme: dark;

  /* pretalx font variables: headings serif, body sans, code mono */
  --font-family: var(--sl-sans);
  --font-family-title: var(--sl-serif);
  --font-family-monospace: var(--sl-mono);

  /* pretalx variables, remapped for a dark surface */
  --color-primary: var(--sl-accent);
  --color-primary-text: var(--sl-link);
  --color-primary-text-dark: var(--sl-link);
  --color-primary-light: var(--sl-accent-soft);
  --color-primary-lighter: color-mix(in srgb, var(--sl-accent) 18%, var(--sl-surface));
  --color-text-on-primary: var(--sl-bg);

  --color-text: var(--sl-text);
  --color-text-input: var(--sl-text-body);
  --color-text-muted: var(--sl-muted);
  --color-text-lighter: rgb(255 255 255 / 0.6);
  --color-code: var(--sl-link);

  --color-bg: var(--sl-surface);
  --color-white: var(--sl-surface);
  --color-offwhite: var(--sl-surface-2);
  --color-grey-lightest: var(--sl-bg);
  --color-grey-lighter: var(--sl-surface-2);
  --color-grey-light: var(--sl-line);
  --color-grey-medium-lighter: var(--sl-muted);
  --color-grey-medium-light: var(--sl-muted);
  --color-grey-medium: var(--sl-muted);
  --color-grey-dark: #d4d4d8;
  --color-grey: #71717a;
  --color-secondary: var(--sl-muted);
  --color-border: var(--sl-line);
  --color-card-border: var(--sl-surface-2);
  --color-card-header: rgb(255 255 255 / 0.03);

  --color-success: #4ade80;
  --color-success-text: #86efac;
  --color-success-text-dark: #bbf7d0;
  --color-success-light: #14532d;
  --color-info: var(--sl-sky);
  --color-info-text: #7dd3fc;
  --color-info-text-dark: #bae6fd;
  --color-warning: #f59e0b;
  --color-warning-text: #fcd34d;
  --color-warning-text-dark: #fde68a;
  --color-danger: #f87171;
  --color-danger-text: #fca5a5;
  --color-danger-text-dark: #fecaca;

  --shadow-lightest: 0 1px 2px rgb(0 0 0 / 0.6);
}

/* ---------- base ---------- */
html body {
  background: var(--sl-bg);
  color: var(--sl-text-body);
  font-family: var(--sl-sans);
  /* header text on the dark band: the accent, like the site's title */
  --color-header-text: var(--sl-accent);
}

html body h1,
html body h2,
html body h3,
html body h4,
html body h5,
html body .card-title {
  font-family: var(--sl-serif);
  color: var(--sl-text);
  font-weight: 600;
  letter-spacing: -0.01em;
}

html body a {
  color: var(--sl-link);
}
html body a:hover {
  color: var(--sl-accent);
}

html body code,
html body kbd,
html body pre,
html body .badge {
  font-family: var(--sl-mono);
}

/* ---------- header: dark band with a rule, rose + serif name in accent ---------- */
html body #top-bg {
  background-color: var(--sl-bg);
  border-bottom: 1px solid var(--sl-surface-2);
}
html body header h1 a {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--sl-serif);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--sl-accent);
  text-decoration: none;
}
html body header h1 a::before {
  content: "";
  flex: none;
  width: 1.15em;
  height: 1.15em;
  background: url("logo.e4834f13a8ed.png") center / contain no-repeat;
}
html body header h1 a:hover {
  color: #ef4444; /* the site's hover: red-500 */
}
html body header .header-row-right a,
html body #header-tabs a {
  color: #d4d4d8;
}
html body header .header-row-right a:hover,
html body #header-tabs a:hover {
  color: var(--sl-accent);
}

/* ---------- content surfaces ---------- */
html body #main-card,
html body .card {
  background-color: var(--sl-surface);
  border-color: var(--sl-surface-2);
  color: var(--sl-text-body);
}
html body #main-card #content {
  line-height: 1.7;
}
html body #content blockquote {
  border-left: 3px solid var(--sl-accent);
  color: var(--sl-muted);
  font-style: italic;
}
html body hr {
  border-color: var(--sl-surface-2);
}

/* forms */
html body input,
html body select,
html body textarea,
html body .form-control {
  background-color: var(--sl-bg);
  color: var(--sl-text);
  border-color: var(--sl-line);
}
/* markdown editor (abstract/description/bio): pretalx hard-codes white here */
html body .markdown-wrapper {
  background: var(--sl-surface);
  border-color: var(--sl-line);
}
html body .markdown-wrapper .markdown-tabpanel {
  background-color: var(--sl-surface-2);
}
html body .markdown-wrapper textarea {
  background-color: var(--sl-bg);
  color: var(--sl-text);
}
html body .markdown-wrapper .preview-footer {
  border-top-color: var(--sl-line);
}
html body .markdown-toolbar {
  color: var(--sl-muted);
}

html body input::placeholder,
html body textarea::placeholder {
  color: #71717a;
}

/* pretalx gives buttons the title font through an :is(...):not(.font-text) rule
   with specificity (0,3,1); the site's buttons/nav are sans, so outrank it
   (:root counts as a class, giving (0,3,2)). */
:root body button:not(.font-text):not(.font-title),
:root body a.btn:not(.font-text):not(.font-title),
:root body summary.btn:not(.font-text):not(.font-title),
:root body [role="button"]:not(.font-text):not(.font-title) {
  font-family: var(--sl-sans);
}

/* buttons: solid accent with dark text; outlined variants in accent */
html body .btn-primary,
html body .btn-info,
html body .btn-success {
  background-color: var(--sl-accent);
  border-color: var(--sl-accent);
  color: var(--sl-bg);
  font-weight: 600;
}
html body .btn-primary:hover,
html body .btn-info:hover,
html body .btn-success:hover {
  background-color: #ff9a55;
  border-color: #ff9a55;
  color: var(--sl-bg);
}
html body .btn-outline-primary,
html body .btn-outline-info {
  color: var(--sl-accent);
  border-color: var(--sl-accent);
  background: transparent;
}

/* other surfaces pretalx hard-codes as white (QR codes and avatars stay white on purpose) */
html body dialog,
html body .dropdown-content,
html body .table-submission-info,
html body .pretalx-session-info {
  background: var(--sl-surface);
  color: var(--sl-text-body);
  border-color: var(--sl-line);
}
/* submission wizard steps: dark circles, current step stays accent */
html body .stages .step:not(.step-current):not(.step-done) .step-icon {
  background: var(--sl-surface-2);
  color: var(--sl-muted);
  border-color: var(--sl-line);
}

/* tables (talk lists, speaker lists) */
html body table {
  color: var(--sl-text-body);
}
html body table thead th {
  background-color: var(--sl-surface-2);
  color: var(--sl-text);
}
html body table td,
html body table th {
  border-color: var(--sl-surface-2);
}

/* footer */
html body footer,
html body footer a {
  color: #71717a;
}
html body footer a:hover {
  color: var(--sl-accent);
}

/* ---------- dropdowns (user menu: My proposals / My Emails / ...) ----------
   pretalx's ui/dropdown.css hard-codes a white panel and white arrows, while our palette makes
   the item text light, so the menu was light grey on white. Dark panel, accent-tinted hover. */
html body details.dropdown .dropdown-content {
  background: var(--sl-surface);
  border-color: var(--sl-line);
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.5);
}
html body details.dropdown .dropdown-content .dropdown-item,
html body details.dropdown .dropdown-content a.dropdown-item,
html body details.dropdown .dropdown-content button.dropdown-item {
  color: var(--sl-text-body);
  background: transparent;
}
html body details.dropdown .dropdown-content .dropdown-item:hover,
html body details.dropdown .dropdown-content .dropdown-item:focus-visible {
  background-color: var(--color-primary-lighter);
  color: var(--sl-text);
}
html body details.dropdown .dropdown-content .dropdown-item i {
  color: var(--sl-accent);
}
html body details.dropdown .dropdown-content hr {
  border-top-color: var(--sl-line);
}
/* arrows: the outer (::before) one is the border, the inner (::after) one the panel */
html body details.dropdown .dropdown-content::before { border-bottom-color: var(--sl-line); }
html body details.dropdown .dropdown-content::after { border-bottom-color: var(--sl-surface); }
html body details.dropdown .dropdown-content-w::before { border-bottom-color: transparent; border-left-color: var(--sl-line); }
html body details.dropdown .dropdown-content-w::after { border-bottom-color: transparent; border-left-color: var(--sl-surface); }
html body details.dropdown .dropdown-content-e::before { border-bottom-color: transparent; border-right-color: var(--sl-line); }
html body details.dropdown .dropdown-content-e::after { border-bottom-color: transparent; border-right-color: var(--sl-surface); }
html body details.dropdown .dropdown-content-ne::after { border-bottom-color: transparent; border-top-color: var(--sl-surface); }