/* =============================================================
   theme.css — Anchor Credo Origin shared design system (gold-on-ink)

   Linked into every hub page. Three layers:
     1) DESIGN TOKENS    — :root custom properties (colour, type, space…)
     2) BASE POLISH      — body/scrollbar/selection/focus/reduced-motion
     3) UTILITY PRIMITIVES — opt-in .cred-* classes for the polish pass

   The legacy pages hardcode hexes, so the *accent recolour* (light blue
   → gold) is applied directly in each page. This file is the forward-
   looking token layer + the global polish that makes the whole hub feel
   warmer, deeper and more premium — and the shared chrome (nav, buttons,
   cards, chips, inputs, empty states) used by the redesigned markup.

   Link order in <head>: fonts → theme.css → page <style> → glass.css.
   Tokens resolve at use-time so order never breaks variables; base rules
   are deliberately low-specificity so a page's own layout always wins.
   ============================================================= */

:root {
  /* ── Core surfaces — ink-navy, warm-black ─────────────────── */
  --ink:        #0a1420;   /* page background floor                */
  --ink-2:      #0c1826;   /* faint lift off the floor            */
  --surface:    #121f31;   /* cards / panels                       */
  --surface-2:  #16263b;   /* raised / hover                       */
  --surface-3:  #1b2e46;   /* highest elevation                    */

  /* Warm-neutral hairlines (never blue) — the rim language        */
  --hairline:        rgba(231, 223, 205, 0.10);
  --hairline-strong: rgba(231, 223, 205, 0.18);

  /* ── Gold — the only saturated colour in the system ───────── */
  --gold:        #c9b796;  /* primary accent: buttons, links, focus */
  --gold-bright: #d8c7a4;  /* hover / glow                          */
  --gold-deep:   #a78f63;  /* pressed / solid borders / deep links  */
  --gold-ink:    #1a1206;  /* text/icon on a gold fill              */
  --gold-soft:   rgba(201, 183, 150, 0.12);  /* tint background      */
  --gold-soft-2: rgba(201, 183, 150, 0.20);
  --gold-line:   rgba(201, 183, 150, 0.45);  /* gold hairline        */
  --gold-glow:   rgba(201, 183, 150, 0.22);

  /* ── Warm sand — secondary, for quiet differentiation ─────── */
  --sand:        #c3af91;
  --sand-dim:    #9c8d74;

  /* ── Text ramp ───────────────────────────────────────────── */
  --text:        #e8edf2;
  --text-2:      #b8c3d1;
  --text-muted:  #93a4b8;
  --text-faint:  #5d6b7d;

  /* ── Semantic (kept calm to live beside gold) ─────────────── */
  --ok:     #4cc38a;
  --warn:   #e0a82e;
  --danger: #e5635f;
  --danger-soft: rgba(229, 99, 95, 0.14);

  /* ── Radii ───────────────────────────────────────────────── */
  --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --r-pill: 999px;

  /* ── Spacing scale ───────────────────────────────────────── */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;

  /* ── Shadows — soft, near-black, with a gold glow option ──── */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.30);
  --shadow-2: 0 8px 24px rgba(0, 0, 0, 0.38);
  --shadow-3: 0 22px 56px rgba(0, 0, 0, 0.52);
  --ring-gold: 0 0 0 1px rgba(201, 183, 150, 0.30), 0 0 22px rgba(201, 183, 150, 0.16);

  /* ── Type ────────────────────────────────────────────────── */
  --font-ui:    "Lato", "Inter", system-ui, "Segoe UI", sans-serif;
  --font-serif: "Fraunces", "Newsreader", Georgia, "Times New Roman", serif;
  --font-mono:  "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;

  /* ── Motion ──────────────────────────────────────────────── */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur: 160ms;
  --dur-slow: 320ms;
}

/* =============================================================
   BASE POLISH — global, low-specificity, additive
   ============================================================= */

/* Ink floor so any uncovered gap reads as deep navy, not browser white. */
html { background: var(--ink); }

/* Warm, gold-on-hover scrollbars across the hub. */
* { scrollbar-width: thin; scrollbar-color: rgba(150, 140, 115, 0.34) transparent; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(150, 140, 115, 0.30);
  border-radius: var(--r-pill);
  border: 3px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(201, 183, 150, 0.46);
  background-clip: content-box;
}

/* Gold text selection. */
::selection { background: rgba(201, 183, 150, 0.32); color: #fff; }

/* Single, on-brand focus ring for keyboard users (mouse clicks unaffected). */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: 3px;
}

/* Respect reduced-motion globally — intro/constellation included. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* =============================================================
   UTILITY PRIMITIVES — opt-in .cred-* classes (no bare-tag rules,
   so adding the stylesheet can never restyle an existing page; a
   class only takes effect where the redesigned markup applies it).
   ============================================================= */

/* ── Top navigation ──────────────────────────────────────── */
.cred-nav {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: var(--s-5);
  height: 60px; padding: 0 var(--s-5);
  background: linear-gradient(180deg, rgba(12, 24, 38, 0.92), rgba(10, 20, 32, 0.82));
  border-bottom: 1px solid var(--hairline);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
}
.cred-wordmark {
  display: inline-flex; align-items: baseline; gap: 8px;
  font-family: var(--font-serif);
  font-size: 19px; font-weight: 600; letter-spacing: 0.01em;
  color: var(--text); text-decoration: none; white-space: nowrap;
}
.cred-wordmark .sep { color: var(--gold); font-weight: 400; opacity: 0.9; }
.cred-wordmark .o { color: var(--gold); }
.cred-navlinks { display: flex; align-items: center; gap: 2px; margin-left: var(--s-3); }
.cred-navlink {
  padding: 8px 13px; border-radius: var(--r-sm);
  font-family: var(--font-ui); font-size: 13.5px; font-weight: 600;
  color: var(--text-muted); text-decoration: none;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.cred-navlink:hover { color: var(--text); background: rgba(255, 255, 255, 0.04); }
.cred-navlink.is-active { color: var(--gold); }
.cred-navspacer { flex: 1 1 auto; }

/* ── Buttons ─────────────────────────────────────────────── */
.cred-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 18px; border-radius: var(--r-md);
  font-family: var(--font-ui); font-size: 13.5px; font-weight: 700;
  letter-spacing: 0.01em; line-height: 1;
  border: 1px solid transparent; cursor: pointer;
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease),
              border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  text-decoration: none; white-space: nowrap;
}
.cred-btn:active { transform: translateY(1px); }
.cred-btn--primary {
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  color: var(--gold-ink);
  box-shadow: var(--shadow-1), inset 0 1px 0 rgba(255, 255, 255, 0.30);
}
.cred-btn--primary:hover { box-shadow: var(--ring-gold), inset 0 1px 0 rgba(255, 255, 255, 0.30); transform: translateY(-1px); }
.cred-btn--ghost {
  background: rgba(255, 255, 255, 0.03);
  border-color: var(--hairline-strong); color: var(--text-2);
}
.cred-btn--ghost:hover { border-color: var(--gold-line); color: var(--text); background: var(--gold-soft); }
.cred-btn--gold-outline {
  background: var(--gold-soft); border-color: var(--gold-line); color: var(--gold);
}
.cred-btn--gold-outline:hover { background: var(--gold-soft-2); border-color: var(--gold); color: var(--gold-bright); }
.cred-btn--danger { background: var(--danger-soft); border-color: rgba(229, 99, 95, 0.4); color: var(--danger); }
.cred-btn--danger:hover { background: rgba(229, 99, 95, 0.22); border-color: var(--danger); }
.cred-btn:disabled, .cred-btn[disabled] { opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: none; }

/* ── Cards ───────────────────────────────────────────────── */
.cred-card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-2);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.cred-card--interactive { cursor: pointer; }
.cred-card--interactive:hover {
  transform: translateY(-2px);
  border-color: var(--gold-line);
  box-shadow: var(--shadow-3);
}

/* ── Chips / pills / badges ──────────────────────────────── */
.cred-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: var(--r-pill);
  font-family: var(--font-ui); font-size: 12px; font-weight: 600;
  color: var(--text-2); background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--hairline); cursor: pointer;
  transition: all var(--dur) var(--ease);
}
.cred-chip:hover { color: var(--text); border-color: var(--gold-line); }
.cred-chip.is-active { color: var(--gold); background: var(--gold-soft); border-color: var(--gold-line); }
.cred-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px; border-radius: var(--r-sm);
  font-family: var(--font-mono); font-size: 9px; font-weight: 600;
  letter-spacing: 0.07em; text-transform: uppercase;
}
.cred-badge--gold { color: var(--gold); background: var(--gold-soft); border: 1px solid var(--gold-line); }
.cred-badge--muted { color: var(--text-muted); background: rgba(148, 163, 184, 0.12); border: 1px solid var(--hairline); }

/* ── Inputs ──────────────────────────────────────────────── */
.cred-input, .cred-textarea, .cred-select {
  width: 100%; box-sizing: border-box;
  padding: 11px 13px; border-radius: var(--r-md);
  background: rgba(0, 0, 0, 0.26);
  border: 1px solid var(--hairline-strong);
  color: var(--text); font-family: var(--font-ui); font-size: 14px;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.cred-input::placeholder, .cred-textarea::placeholder { color: var(--text-faint); }
.cred-input:focus, .cred-textarea:focus, .cred-select:focus {
  outline: none; border-color: var(--gold-line);
  box-shadow: 0 0 0 3px var(--gold-soft);
}

/* ── States: empty / loading / error ─────────────────────── */
.cred-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--s-3); text-align: center;
  padding: var(--s-7) var(--s-5);
  color: var(--text-muted); font-family: var(--font-ui);
  border: 1px dashed var(--hairline-strong); border-radius: var(--r-lg);
  background: rgba(255, 255, 255, 0.015);
}
.cred-empty strong { color: var(--text); font-size: 15px; font-weight: 700; }
.cred-empty .cred-empty-icon { font-size: 26px; opacity: 0.5; }

.cred-skeleton {
  position: relative; overflow: hidden;
  background: rgba(255, 255, 255, 0.04); border-radius: var(--r-md);
}
.cred-skeleton::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(201, 183, 150, 0.08), transparent);
  transform: translateX(-100%); animation: cred-shimmer 1.5s var(--ease) infinite;
}
@keyframes cred-shimmer { to { transform: translateX(100%); } }

/* ── Misc helpers ────────────────────────────────────────── */
.cred-mono { font-family: var(--font-mono); }
.cred-serif { font-family: var(--font-serif); }
.cred-muted { color: var(--text-muted); }
.cred-divider { height: 1px; background: var(--hairline); border: 0; margin: var(--s-5) 0; }
