/* =====================================================================
   Chairloop — shared web brand stylesheet.
   Tokens MIRROR design-system/colors_and_type.css (keep in sync; this repo
   is buildless, so this is a served copy, not an import). Component classes
   below are web-surface shared UI (dashboard + marketing).
   ===================================================================== */

:root {
  /* Surfaces — cool light neutrals */
  --cl-frost:          #FAFAFA;
  --cl-frost-deep:     #F2F1F3;
  --cl-paper:          #FFFFFF;
  --cl-paper-up:       #F8F6F8;
  --cl-mist:           #F2EFF2;
  --cl-mist-accent:    #ECE7EC;
  --cl-hairline:       #E5E2E5;
  --cl-hairline-strong:#C9C3CB;
  --cl-pearl:          #F4F0EA;

  /* Ink — slate with a plum undertone */
  --cl-ink:            #1E1A22;
  --cl-ink-soft:       #4A4150;
  --cl-mute:           #7A6F7A;
  --cl-mute-soft:      rgba(122, 111, 122, 0.55);

  /* Plum — primary action */
  --cl-plum:           #5C2E45;
  --cl-plum-deep:      #3F1E2F;
  --cl-plum-soft:      #8A546B;

  /* Slate — cool counterweight */
  --cl-slate:          #3D3A4A;
  --cl-slate-deep:     #25222E;
  --cl-slate-soft:     #E4E1E8;

  /* Gold — section labels + accent marks */
  --cl-gold:           #B08A4A;
  --cl-gold-deep:      #8A6A38;
  --cl-gold-soft:      #D9C28A;

  /* Functional */
  --cl-danger:         #A02D1C;
  --cl-success-bg:     #E5EDD8;
  --cl-success-ink:    #2A3D24;

  /* Semantic mapping */
  --bg:                var(--cl-frost);
  --bg-elevated:       var(--cl-paper);
  --bg-soft:           var(--cl-frost-deep);
  --bg-tint:           var(--cl-mist);
  --bg-tint-accent:    var(--cl-mist-accent);
  --fg1:               var(--cl-ink);
  --fg2:               var(--cl-mute);
  --fg3:               var(--cl-mute-soft);
  --fg-on-accent:      var(--cl-pearl);
  --accent:            var(--cl-plum);
  --accent-deep:       var(--cl-plum-deep);
  --accent-soft:       var(--cl-plum-soft);
  --accent-mark:       var(--cl-gold);
  --border:            var(--cl-hairline);
  --border-strong:     var(--cl-hairline-strong);
  --border-dashed:     rgba(176, 138, 74, 0.60);

  /* Radii / spacing / stroke */
  --r-xs: 6px; --r-sm: 8px; --r-md: 10px; --r-lg: 12px;
  --r-xl: 14px; --r-2xl: 18px; --r-pill: 999px;
  --s-1: 4px; --s-2: 6px; --s-3: 8px; --s-4: 10px; --s-5: 12px;
  --s-6: 14px; --s-7: 16px; --s-8: 18px; --s-9: 22px; --s-10: 28px; --s-12: 40px;
  --stroke-hairline: 0.5px; --stroke-1: 1px; --stroke-1-5: 1.5px;

  /* Shadows */
  --shadow-card:  0 1px 0 rgba(30, 26, 34, 0.02);
  --shadow-lift:  0 6px 24px -10px rgba(30, 26, 34, 0.16);
  --shadow-sheet: 0 24px 60px -16px rgba(30, 26, 34, 0.28);

  /* Type */
  --font-serif: ui-serif, "New York", "Iowan Old Style", "Charter",
                "Source Serif Pro", Georgia, "Times New Roman", serif;
  --font-sans:  -apple-system, BlinkMacSystemFont, "SF Pro Text",
                "Segoe UI", Inter, system-ui, sans-serif;
  --font-mono:  ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --t-display: 48px; --t-display-sm: 32px; --t-h1: 28px; --t-h2: 22px;
  --t-h3: 18px; --t-body: 15px; --t-body-sm: 13px; --t-meta: 12px;
  --t-caption: 11px; --t-label: 10px;
  --lh-display: 1.1; --lh-tight: 1.15; --lh-snug: 1.2; --lh-base: 1.45; --lh-loose: 1.55;
  --track-label: 0.16em;
}

/* =====================================================================
   BASE
   ===================================================================== */
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg1);
  font: 400 var(--t-body)/var(--lh-base) var(--font-serif);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Semantic type */
.cl-display { font: 400 var(--t-display)/var(--lh-display) var(--font-serif); letter-spacing: -0.02em; color: var(--fg1); }
.cl-h1 { font: 500 var(--t-h1)/var(--lh-tight) var(--font-serif); color: var(--fg1); margin: 0; }
.cl-h2 { font: 500 var(--t-h2)/var(--lh-snug) var(--font-serif); color: var(--fg1); margin: 0; }
.cl-h3 { font: 500 var(--t-h3)/var(--lh-snug) var(--font-serif); color: var(--fg1); margin: 0; }
.cl-body { font: 400 var(--t-body)/var(--lh-base) var(--font-serif); color: var(--fg1); }
.cl-body-sm { font: 400 var(--t-body-sm)/var(--lh-base) var(--font-serif); color: var(--fg1); }
.cl-meta { font: 400 var(--t-meta)/var(--lh-base) var(--font-sans); color: var(--fg2); }
.cl-label {
  font: 600 var(--t-label)/1 var(--font-sans);
  letter-spacing: var(--track-label); text-transform: uppercase; color: var(--cl-gold);
}
.cl-mute { color: var(--fg2); }

/* =====================================================================
   COMPONENTS
   ===================================================================== */

/* Buttons */
.btn {
  font: 500 14px/1 var(--font-sans);
  border: none; background: var(--accent); color: var(--fg-on-accent);
  padding: 11px 18px; border-radius: var(--r-xl); cursor: pointer;
  transition: background .15s ease;
}
.btn:hover { background: var(--accent-deep); }
.btn:active { background: var(--accent-deep); }
.btn:disabled { opacity: .5; cursor: default; }
.btn-ghost {
  background: var(--cl-paper); color: var(--fg1);
  border: var(--stroke-hairline) solid var(--border);
}
.btn-ghost:hover { background: var(--bg-tint); }

/* Cards */
.card {
  background: var(--bg-elevated);
  border: var(--stroke-hairline) solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-card);
  padding: var(--s-9);
  margin-bottom: var(--s-7);
}

/* Form fields */
.field, input, select, textarea {
  width: 100%;
  font: 400 15px/1.3 var(--font-serif);
  padding: 11px 12px;
  border: var(--stroke-hairline) solid var(--border);
  border-radius: var(--r-md);
  background: var(--cl-paper);
  color: var(--fg1);
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--accent-soft);
}
label { display: block; font: 400 var(--t-body-sm)/1.3 var(--font-sans); color: var(--fg2); margin: 0 0 6px; }

/* Pills (status) */
.pill { font: 600 var(--t-meta)/1 var(--font-sans); padding: 4px 10px; border-radius: var(--r-pill); display: inline-block; }
.pill--active { background: var(--cl-success-bg); color: var(--cl-success-ink); }
.pill--warn   { background: #FBE9E3; color: var(--cl-danger); }
.pill--none   { background: var(--cl-slate-soft); color: var(--cl-slate); }

/* Stat tiles */
.tile {
  background: var(--bg-elevated);
  border: var(--stroke-hairline) solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-7);
}
.tile .v { font: 300 var(--t-h2)/1 var(--font-serif); color: var(--fg1); }
.tile .l { font: 600 var(--t-label)/1.2 var(--font-sans); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--fg2); margin-top: var(--s-2); }

/* Tables */
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 11px 10px; border-bottom: var(--stroke-hairline) solid var(--border); font-size: var(--t-body-sm); }
th { font: 600 var(--t-label)/1 var(--font-sans); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--fg2); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* Segmented control (role toggle) */
.seg { display: inline-flex; border: var(--stroke-hairline) solid var(--border); border-radius: var(--r-sm); overflow: hidden; }
.seg button {
  background: var(--cl-paper); color: var(--fg1); border: none;
  padding: 6px 12px; font: 500 var(--t-body-sm)/1 var(--font-sans); border-radius: 0; cursor: pointer;
}
.seg button.on { background: var(--accent); color: var(--fg-on-accent); }

/* Loading: spinner + skeleton */
.spinner {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid var(--border); border-top-color: var(--accent);
  animation: cl-spin .7s linear infinite; display: inline-block;
}
@keyframes cl-spin { to { transform: rotate(360deg); } }
.skeleton {
  background: linear-gradient(90deg, var(--bg-soft) 25%, var(--cl-paper-up) 37%, var(--bg-soft) 63%);
  background-size: 400% 100%; animation: cl-shimmer 1.3s ease infinite;
  border-radius: var(--r-sm); height: 14px;
}
@keyframes cl-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

/* Empty state */
.empty { color: var(--fg2); font: 400 var(--t-body-sm)/1.5 var(--font-serif); padding: var(--s-3) 0; }

/* Toast (transient error/info) */
.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  background: var(--cl-slate-deep); color: var(--cl-pearl);
  font: 400 var(--t-body-sm)/1.4 var(--font-sans);
  padding: 10px 16px; border-radius: var(--r-md); box-shadow: var(--shadow-lift);
  max-width: 90vw; opacity: 0; pointer-events: none; transition: opacity .2s ease; z-index: 50;
}
.toast.show { opacity: 1; }
.toast.err { background: var(--cl-danger); }

/* Brand header lockup (chair mark + serif wordmark with gold pip) */
.cl-lockup { display: inline-flex; align-items: center; gap: 10px; }
.cl-lockup img { width: 30px; height: 30px; display: block; }
.cl-wordmark { font: 500 22px/1 var(--font-serif); color: var(--fg1); letter-spacing: -0.01em; }
.cl-wordmark .dot { color: var(--cl-gold); }

.hidden { display: none !important; }