/* ==========================================================================
   HYLN Hub — shared brand tokens
   Taken from hylnhub.com: cream #EFEBE5, black, Belleza wordmark,
   Tenor Sans display, Inter body, fully-round black buttons.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Belleza&family=Tenor+Sans&family=Inter:wght@300;400;500;600&display=swap');

:root{
  /* surfaces, warmest to lightest */
  --bg:        #EFEBE5;   /* page */
  --panel:     #F7F2EA;   /* cards, sidebars */
  --panel-2:   #F7F5F2;   /* nested / hover */
  --white:     #FFFFFF;

  --ink:       #000000;
  --ink-70:    rgba(0,0,0,.70);
  --ink-56:    rgba(0,0,0,.56);
  --ink-48:    rgba(0,0,0,.48);
  --ink-32:    rgba(0,0,0,.32);
  --line:      rgba(0,0,0,.14);
  --line-soft: rgba(0,0,0,.07);
  --wash:      rgba(0,0,0,.04);

  /* the brand has no accent colour — emphasis is black on cream.
     these are for state only, kept muted so they sit in the palette */
  --ok:        #2F6B4F;
  --err:       #A33227;
  --warn:      #8A6A1F;
  --sel:       rgba(0,0,0,.06);

  --font-mark:    'Belleza', system-ui, sans-serif;
  --font-display: 'Tenor Sans', Georgia, serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --r-pill: 50px;
  --r-card: 12px;
  --r-tight: 8px;
}

*{ box-sizing:border-box }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:400 15px/1.6 var(--font-body);
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,.display{ font-family:var(--font-display); font-weight:400; letter-spacing:-.01em }

/* the wordmark, as it appears on hylnhub.com */
.wordmark{
  font-family:var(--font-mark);
  font-size:19px;
  letter-spacing:.055em;
  text-transform:uppercase;
  color:var(--ink);
  text-decoration:none;
  white-space:nowrap;
}
.wordmark .sub{
  font-family:var(--font-body);
  font-size:11px;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--ink-48);
  margin-left:11px;
  padding-left:11px;
  border-left:1px solid var(--line);
}

a{ color:var(--ink); text-decoration:none }
a:hover{ text-decoration:underline }

/* ---- controls ---- */
button, .btn{
  font-family:var(--font-body);
  font-size:13px;
  font-weight:500;
  padding:8px 16px;
  border-radius:var(--r-pill);
  border:1px solid var(--line);
  background:transparent;
  color:var(--ink);
  cursor:pointer;
  transition:background .12s, border-color .12s, opacity .12s;
}
button:hover, .btn:hover{ background:var(--wash); border-color:var(--ink-32); text-decoration:none }
button.primary, .btn.primary{ background:var(--ink); border-color:var(--ink); color:var(--bg) }
button.primary:hover, .btn.primary:hover{ background:#1a1a1a }
button.quiet{ border-color:transparent; color:var(--ink-56); padding:6px 10px }
button.quiet:hover{ color:var(--ink); background:var(--wash) }
button.danger:hover{ border-color:var(--err); color:var(--err); background:transparent }
button:disabled{ opacity:.4; cursor:default }
button:disabled:hover{ background:transparent; border-color:var(--line) }

input, select, textarea{
  font-family:var(--font-body);
  font-size:13.5px;
  padding:9px 13px;
  border-radius:var(--r-tight);
  border:1px solid var(--line);
  background:var(--white);
  color:var(--ink);
}
input:focus, select:focus, textarea:focus{ outline:none; border-color:var(--ink) }
input::placeholder{ color:var(--ink-32) }
input[type=checkbox]{ width:14px; height:14px; accent-color:var(--ink); padding:0; flex:none }

/* ---- chips ---- */
.chip{
  display:inline-flex; align-items:center; gap:5px;
  padding:3.5px 11px;
  border-radius:var(--r-pill);
  border:1px solid var(--line);
  font-size:12px;
  color:var(--ink-56);
  background:transparent;
  cursor:pointer;
  user-select:none;
  white-space:nowrap;
}
.chip:hover{ border-color:var(--ink-32) }
.chip.on{ background:var(--ink); border-color:var(--ink); color:var(--bg) }
.chip.part{ background:transparent; border-color:var(--ink); color:var(--ink);
            border-style:dashed }
.chip.busy{ opacity:.35; pointer-events:none }
.chip.static{ cursor:default; border-style:dotted; opacity:.6 }

.badge{
  display:inline-block; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase;
  padding:2.5px 8px; border-radius:var(--r-pill);
  border:1px solid var(--line); color:var(--ink-48);
}
.badge.admin{ border-color:var(--ink); color:var(--ink) }
.badge.pending{ border-color:var(--warn); color:var(--warn) }

/* ---- structure ---- */
.eyebrow{
  font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-48); font-weight:500;
}
.muted{ color:var(--ink-56); font-size:12.5px }
.hint{ color:var(--ink-56); font-size:12.5px; margin:0 0 14px; max-width:780px }

table{ width:100%; border-collapse:collapse }
th,td{ text-align:left; padding:11px 10px; border-bottom:1px solid var(--line-soft);
       font-size:13px; vertical-align:top }
th{ font-family:var(--font-body); font-weight:500; font-size:10.5px;
    letter-spacing:.1em; text-transform:uppercase; color:var(--ink-48) }

code{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12px;
      background:var(--wash); padding:1.5px 6px; border-radius:5px }

::selection{ background:var(--ink); color:var(--bg) }

/* thin scrollbars that suit a light, quiet page */
*::-webkit-scrollbar{ width:9px; height:9px }
*::-webkit-scrollbar-thumb{ background:var(--ink-32); border-radius:9px }
*::-webkit-scrollbar-track{ background:transparent }