/* ============================================================
   UX Magazine — design tokens + semantic type roles
   Canonical file (repo root). Mockups should converge here;
   action-desk re-imports via action-desk/uxmag-tokens.css.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400;1,700&family=Barlow+Condensed:wght@400;600;700;800&family=Barlow:ital,wght@0,300;0,400;0,500;0,600;1,400&display=swap');

:root {
  /* ── CORE PALETTE ────────────────────────────────────────── */
  --uxm-red:        #D0021B;
  --uxm-ink:        #1A1A1A;
  --uxm-black:      #0C0C0C;
  --uxm-off:        #F5F4EF;
  --uxm-mid:        #5F5F5F;
  --uxm-rule:       #D4D0C8;
  --uxm-rule-soft:  #E2E0D9;

  /* ── MEMBERS GOLD ────────────────────────────────────────── */
  --uxm-member:     #8B6914;
  --uxm-member-bg:  #FBF7EE;
  --uxm-member-hi:  #A07820;

  /* ── CONTENT-TYPE COLOR SYSTEM ───────────────────────────── */
  --uxm-type-episode:      var(--uxm-red);
  --uxm-type-uxm:          #2E5E8E;
  --uxm-type-book:         #1B4D72;
  --uxm-type-guest:        #2E6B38;
  --uxm-type-practitioner: #B85C00;
  --uxm-type-members:      var(--uxm-member);

  --uxm-acc-nitze:   #D0021B;
  --uxm-acc-mallaby: #1B4D72;
  --uxm-acc-barzun:  #2E5E35;
  --uxm-acc-pahlka:  #8B4513;
  --uxm-acc-gordon:  #4A1A6B;

  /* ── AGENTIC DESIGN STACK (Option 2) ─────────────────────── */
  --uxm-stack-service:        #8B4513;
  --uxm-stack-information:    #1B4D72;
  --uxm-stack-interaction:    var(--uxm-red);
  --uxm-stack-conversation:   #2E6B38;
  --uxm-stack-systems:        #0369a1;
  --uxm-stack-organizational: #4A1A6B;

  /* ── SEMANTIC ALIASES ────────────────────────────────────── */
  --bg:        var(--uxm-off);
  --bg-dark:   var(--uxm-ink);
  --fg1:       var(--uxm-ink);
  --fg2:       var(--uxm-mid);
  --fg-on-dark: #ffffff;
  --fg-muted-on-dark: rgba(255,255,255,.65);
  --accent:    var(--uxm-red);
  --rule:      var(--uxm-rule);

  /* Legacy names used in root uxmag-*.html mockups */
  --red:    var(--uxm-red);
  --ink:    var(--uxm-ink);
  --off:    var(--uxm-off);
  --mid:    var(--uxm-mid);
  --rule:   var(--uxm-rule-soft);
  --member: var(--uxm-member);

  /* ── TYPE FAMILIES ───────────────────────────────────────── */
  --serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --cond:  'Barlow Condensed', 'Arial Narrow', sans-serif;
  --sans:  'Barlow', system-ui, -apple-system, sans-serif;

  --fs-11: 11px;
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-15: 15px;
  --fs-17: 17px;
  --fs-19: 19px;
  --fs-22: 22px;
  --fs-28: 28px;
  --fs-36: 36px;
  --fs-48: 48px;
  --fs-56: 56px;
  --fs-72: 72px;

  --ls-tight:  -.02em;
  --ls-snug:   -.01em;
  --ls-normal:  0;
  --ls-wide:    .08em;
  --ls-wider:   .12em;
  --ls-widest:  .18em;

  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 28px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-14: 56px;
  --sp-16: 64px;
  --sp-20: 80px;

  --border-thick: 3px solid var(--uxm-ink);
  --border-rule:  1px solid var(--uxm-rule);
  --border-btn:   1.5px solid var(--uxm-ink);
  --shadow-lift:  0 10px 28px rgba(0,0,0,.08);
  --shadow-card:  0 1px 0 var(--uxm-rule);

  --radius-0:   0;
  --radius-pill: 999px;
  --radius-avatar: 50%;

  --maxw-content: 1280px;
  --maxw-prose:   720px;

  --ease-out:  cubic-bezier(.2,.7,.2,1);
  --t-fast:    120ms;
  --t-base:    280ms;
  --t-slow:    700ms;
}

/* ── SEMANTIC TYPE ROLES ─────────────────────────────────────── */

.uxm-h1, h1.uxm {
  font-family: var(--serif);
  font-weight: 900;
  font-size: var(--fs-56);
  line-height: 1.0;
  letter-spacing: var(--ls-tight);
  color: var(--fg1);
}

.uxm-h2, h2.uxm {
  font-family: var(--serif);
  font-weight: 900;
  font-size: var(--fs-36);
  line-height: 1.1;
  letter-spacing: var(--ls-snug);
}

.uxm-h3, h3.uxm {
  font-family: var(--serif);
  font-weight: 700;
  font-size: var(--fs-28);
  line-height: 1.2;
}

.uxm-headline {
  font-family: var(--serif);
  font-weight: 700;
  font-size: var(--fs-19);
  line-height: 1.25;
}

.uxm-deck {
  font-family: var(--sans);
  font-weight: 300;
  font-size: var(--fs-17);
  line-height: 1.55;
  color: var(--fg2);
}

.uxm-body, p.uxm {
  font-family: var(--sans);
  font-weight: 400;
  font-size: var(--fs-15);
  line-height: 1.65;
  color: var(--fg1);
}

.uxm-body-sm {
  font-family: var(--sans);
  font-size: var(--fs-13);
  line-height: 1.5;
  color: var(--fg2);
}

.uxm-label {
  font-family: var(--cond);
  font-weight: 700;
  font-size: var(--fs-11);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--fg2);
}

.uxm-label--red   { color: var(--uxm-red); }
.uxm-label--ink   { color: var(--uxm-ink); }
.uxm-label--gold  { color: var(--uxm-member); }
.uxm-label--ghost { color: rgba(255,255,255,.5); }

.uxm-meta {
  font-family: var(--cond);
  font-weight: 600;
  font-size: var(--fs-11);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--fg2);
}

.uxm-stance {
  font-family: var(--serif);
  font-weight: 700;
  font-style: italic;
  font-size: var(--fs-15);
}

.uxm-pull {
  font-family: var(--serif);
  font-weight: 700;
  font-style: italic;
  font-size: var(--fs-28);
  line-height: 1.25;
}

.uxm-mono, code.uxm {
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 13px;
}

/* ── BUTTONS ─────────────────────────────────────────────────── */

.uxm-btn {
  display: inline-block;
  font-family: var(--cond);
  font-weight: 800;
  font-size: var(--fs-11);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  padding: 10px 18px;
  border: var(--border-btn);
  background: transparent;
  color: var(--fg1);
  cursor: pointer;
  transition: background var(--t-base), color var(--t-base), border-color var(--t-base);
}

.uxm-btn:hover {
  color: var(--uxm-red);
  border-color: var(--uxm-red);
}

.uxm-btn--primary {
  background: var(--uxm-red);
  border-color: var(--uxm-red);
  color: #fff;
}

.uxm-btn--primary:hover {
  background: #b0011a;
  border-color: #b0011a;
  color: #fff;
}

.uxm-btn--ink {
  background: var(--uxm-ink);
  border-color: var(--uxm-ink);
  color: #fff;
}

.uxm-btn--ink:hover {
  background: var(--uxm-red);
  border-color: var(--uxm-red);
  color: #fff;
}

/* ── CONTENT-TYPE LABELS (ideation clusters) ─────────────────── */

.uxm-type-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--cond);
  font-weight: 700;
  font-size: var(--fs-11);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

.uxm-type-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.uxm-type-row--episode      { color: var(--uxm-type-episode); }
.uxm-type-row--episode .uxm-type-dot { background: var(--uxm-type-episode); }
.uxm-type-row--uxm          { color: var(--uxm-type-uxm); }
.uxm-type-row--uxm .uxm-type-dot { background: var(--uxm-type-uxm); }
.uxm-type-row--book         { color: var(--uxm-type-book); }
.uxm-type-row--book .uxm-type-dot { background: var(--uxm-type-book); }
.uxm-type-row--guest        { color: var(--uxm-type-guest); }
.uxm-type-row--guest .uxm-type-dot { background: var(--uxm-type-guest); }
.uxm-type-row--practitioner { color: var(--uxm-type-practitioner); }
.uxm-type-row--practitioner .uxm-type-dot { background: var(--uxm-type-practitioner); }
.uxm-type-row--members      { color: var(--uxm-type-members); }
.uxm-type-row--members .uxm-type-dot { background: var(--uxm-type-members); }

/* ── MOTION HELPERS (site kit) ───────────────────────────────── */

.uxm-lift {
  transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .uxm-lift:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lift);
  }
}

.uxm-link {
  position: relative;
  display: inline-block;
}

.uxm-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 350ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .uxm-link:hover::after,
  .uxm-link:focus-visible::after {
    transform: scaleX(1);
  }
}

/* ── BASE ────────────────────────────────────────────────────── */

.uxm-base {
  background: var(--bg);
  color: var(--fg1);
  font-family: var(--sans);
  font-size: var(--fs-15);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.uxm-base a { color: inherit; text-decoration: none; }
.uxm-base a:hover { color: var(--uxm-red); }