/* ============================================================
   Psy.nz — Theme: Warm & Human
   ------------------------------------------------------------
   Loaded AFTER style.css. Every colour, radius and shadow in the
   2,400-line stylesheet resolves through the custom properties
   below, so redefining them here reskins all 81 templates without
   touching a single line of markup.

   Palette
     Clay   #c25e3a   primary   (was indigo #4f46e5)
     Sage   #4a6b54   secondary (was mint #14b8a6)
     Honey  #d69a4c   highlights, ratings
     Ink    #2e2822   text      (was slate #0f172a)
     Cream  #fbf7f2   page      (was blue-white #f5f7ff)
     Sand   #f3e3d8   raised surfaces

   The --c-indigo-* names are kept on purpose. Renaming them would
   mean editing thousands of references for no benefit — the name
   is now just a slot, and clay lives in it.
   ============================================================ */

:root {
  /* ── Surfaces ─────────────────────────────────────────── */
  --c-bg:          #fbf7f2;   /* warm cream page */
  --c-surface:     #ffffff;
  --c-surface-2:   #f6efe6;   /* sand, for raised/secondary panels */
  --c-border:      #e8ddd0;   /* warm tan hairline */
  --c-border-2:    #d6c4ae;

  /* ── Primary: clay (slot formerly indigo) ─────────────── */
  --c-indigo-900:  #3a1a0d;
  --c-indigo-800:  #5c2b17;
  --c-indigo-700:  #93472a;
  --c-indigo-600:  #c25e3a;   /* the accent */
  --c-indigo-500:  #d47a58;
  --c-indigo-400:  #e09b7f;   /* these three were USED but never */
  --c-indigo-300:  #ebbca7;   /* DEFINED in style.css — 45 dead   */
  --c-indigo-200:  #f3d6c8;   /* rules, now alive                 */
  --c-indigo-100:  #f7e5da;
  --c-indigo-50:   #fcf4ee;

  /* ── Secondary: sage (slot formerly mint) ─────────────── */
  --c-mint-700:    #3a5442;
  --c-mint-600:    #4a6b54;
  --c-mint-500:    #6d8f76;
  --c-mint-100:    #dfe9e0;
  --c-mint-50:     #f1f5f1;

  /* ── Functional — warmed, never alarming ─────────────── */
  --c-success:     #4a6b54;
  --c-success-bg:  #e6efe6;
  --c-warning:     #b07726;
  --c-warning-bg:  #faedd8;
  --c-danger:      #b1442f;
  --c-danger-bg:   #f9e6e1;
  --c-info:        #4a6b54;
  --c-info-bg:     #eef3ee;

  /* ── Type ─────────────────────────────────────────────── */
  --c-text:        #2e2822;   /* ink, never pure black */
  --c-text-2:      #4c433a;
  --c-muted:       #8a7a6b;
  --c-muted-2:     #a99887;

  /* ── Shadows: warm-tinted, soft, low ──────────────────── */
  --shadow-xs:  0 1px 2px rgba(64, 46, 32, .05);
  --shadow-sm:  0 2px 8px rgba(64, 46, 32, .06), 0 1px 2px rgba(64, 46, 32, .04);
  --shadow-md:  0 6px 20px rgba(64, 46, 32, .08), 0 2px 6px rgba(64, 46, 32, .05);
  --shadow-lg:  0 14px 40px rgba(64, 46, 32, .10), 0 4px 12px rgba(64, 46, 32, .06);
  --shadow-xl:  0 24px 60px rgba(64, 46, 32, .13);

  /* ── Radius: rounder, friendlier ─────────────────────── */
  --r-sm:   10px;
  --r-md:   16px;
  --r-lg:   24px;
  --r-xl:   32px;
  --r-full: 9999px;

  /* ── Motion: a touch slower, less clinical ───────────── */
  --t-fast: 160ms cubic-bezier(.34, .8, .35, 1);
  --t-base: 260ms cubic-bezier(.34, .8, .35, 1);
  --t-slow: 420ms cubic-bezier(.34, .8, .35, 1);

  /* ── Back-compat aliases ─────────────────────────────── */
  --sk-coral:   #c25e3a;
  --role-color: var(--c-indigo-600);

  /* ── Fonts ───────────────────────────────────────────── */
  --f-sans:  'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --f-serif: 'Fraunces', Georgia, 'Times New Roman', serif;
}

/* ============================================================
   Typography
   style.css hardcodes 'Plus Jakarta Sans' in ~40 rules, several
   with !important. Overriding the family on the elements is the
   only way to win without editing every one of them.
   ============================================================ */

body,
button, input, select, textarea,
.btn, .form-control, .nav-link, .dropdown-item {
  font-family: var(--f-sans) !important;
}

/* Headlines carry the warmth. Fraunces is a soft, humanist serif —
   the "unclinical" part of the brief lives here. */
h1, h2, h3,
.sk-section-title,
.sk-hero-title,
.sk-card-title,
.sk-article-title {
  font-family: var(--f-serif) !important;
  font-weight: 600 !important;
  letter-spacing: -0.015em;
  line-height: 1.25;
}

/* Small caps labels stay sans — serif at 11px is mush */
.sk-section-tag,
.sk-sidebar-heading,
.badge,
.sk-role-badge {
  font-family: var(--f-sans) !important;
}

body {
  background: var(--c-bg);
  color: var(--c-text);
  -webkit-font-smoothing: antialiased;
}

/* ============================================================
   Component softening
   Small nudges the token layer can't reach on its own.
   ============================================================ */

.btn, .sk-btn-primary, .sk-btn-outline {
  border-radius: var(--r-full);
  font-weight: 600;
  letter-spacing: .005em;
}

.sk-btn-primary {
  background: var(--c-indigo-600);
  border-color: var(--c-indigo-600);
}
.sk-btn-primary:hover {
  background: var(--c-indigo-700);
  border-color: var(--c-indigo-700);
}

/* Cards: warm border, soft corner, no cold ring */
.sk-card,
.sk-sidebar-card,
.sk-article-card {
  border-radius: var(--r-md);
  border-color: var(--c-border);
  background: var(--c-surface);
}

/* Inputs: sand-tinted, rounded, calm focus */
.form-control, .sk-input, .form-select {
  border-radius: var(--r-sm);
  border-color: var(--c-border);
  background: #fffdfb;
}
.form-control:focus, .sk-input:focus, .form-select:focus {
  border-color: var(--c-indigo-400);
  box-shadow: 0 0 0 3px var(--c-indigo-50);
}

/* Avatars and pills fully round */
.sk-avatar, .sk-avatar-sm, .sk-avatar-lg { border-radius: var(--r-full); }

/* Navbar sits on cream, not white — less of a hard edge */
.sk-navbar, .navbar {
  background: rgba(251, 247, 242, .88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--c-border);
}

/* Footer: same dark clay gradient as the admin sidebar.
   style.css styles the footer's links, headings and muted text for a
   DARK background (white / translucent white). Making it light left
   that text nearly invisible — so it stays dark, just warm now. */
.sk-footer {
  background: linear-gradient(180deg, var(--c-indigo-900) 0%, var(--c-indigo-800) 100%);
  border-top: none;
  color: rgba(255, 255, 255, .78);
}
.sk-footer .sk-brand      { color: #ffffff !important; }
.sk-footer .text-muted    { color: rgba(255, 255, 255, .52) !important; }
.sk-footer-heading        { color: #a8c4ae; }             /* pale sage - 6.2:1 even on the lighter end of the gradient */
.sk-footer-link           { color: rgba(255, 255, 255, .7); }
.sk-footer-link:hover     { color: #ffffff; }
.sk-footer-divider        { border-color: rgba(255, 255, 255, .12); }

/* Selection in clay */
::selection { background: var(--c-indigo-100); color: var(--c-indigo-900); }

/* Scrollbar, where the browser allows it */
* { scrollbar-color: var(--c-border-2) transparent; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}