/* ============================================================
   ADITOR DESIGN SYSTEM
   Single source of visual truth. Import once in the SPA head.
   ============================================================ */

:root {
  /* canvas & surfaces */
  --bg-canvas:        #0B0B0D;
  --surface-sunken:   #08080A;
  --surface-raised:   #111114;
  --surface-elevated: #17171B;

  /* atmosphere */
  --halo-orange: rgba(255,107,53, 0.10);
  --halo-steel:  rgba(143,185,230, 0.06);

  /* glass */
  --glass-fill:      rgba(255,255,255,0.035);
  --glass-border:    rgba(255,255,255,0.08);
  --glass-highlight: rgba(255,255,255,0.06);

  /* ink */
  --ink-1: #F5F5F2;
  --ink-2: #A8A8A4;
  --ink-3: #6B6B68;
  --ink-4: #2E2E30;

  /* brand */
  --brand:      #FF6B35;
  --brand-hi:   #FF7A3D;
  --brand-lo:   #E8552A;
  --brand-deep: #C44D1E;
  --brand-30: rgba(255,107,53,0.30);
  --brand-10: rgba(255,107,53,0.10);
  --brand-gradient: linear-gradient(135deg,#FF7A3D 0%,#E8552A 100%);

  /* accent + semantic */
  --steel:   #8FB9E6;
  --success: #7FA776;
  --success-soft: rgba(127,167,118,0.12);
  --warn:    #C8A24A;
  --warn-soft: rgba(200,162,74,0.12);
  --error:   #B84343;
  --error-soft: rgba(184,67,67,0.12);

  /* fonts */
  --font-serif: 'Instrument Serif', Times, serif;
  --font-sans:  -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', system-ui, sans-serif;
  --font-mono:  'JetBrains Mono', 'SF Mono', ui-monospace, monospace;

  /* tracking */
  --track-display: -0.025em;
  --track-h:       -0.02em;
  --track-mono:    0.14em;
  --track-eyebrow: 0.3em;

  /* radii */
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:20px; --r-pill:999px;

  /* shadows */
  --shadow-inner-top: inset 0 1px 0 rgba(255,255,255,0.06);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.35);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.5);

  /* motion */
  --ease: cubic-bezier(0.22,1,0.36,1);
  --dur-fast: 180ms;
  --dur-base: 240ms;
}

:root { color-scheme: dark; }

html, body {
  background: var(--bg-canvas);
  color: var(--ink-1);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body::before {
  content:''; position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image:
    radial-gradient(900px 600px at 50% -10%, var(--halo-orange), transparent 60%),
    radial-gradient(800px 600px at 0% 110%, var(--halo-steel), transparent 60%);
}

/* ---- Typography utilities ---- */
.t-display { font-family: var(--font-sans); font-weight: 600; font-size: 56px; letter-spacing: -0.03em; line-height: 1.05; }
.t-h1      { font-family: var(--font-sans); font-weight: 600; font-size: 44px; letter-spacing: -0.025em; line-height: 1.1; }
.t-h2      { font-family: var(--font-sans); font-weight: 600; font-size: 32px; letter-spacing: -0.02em; line-height: 1.15; }
.t-h3      { font-family: var(--font-sans); font-weight: 600; font-size: 22px; letter-spacing: -0.015em; line-height: 1.2; }
.t-h4      { font-size: 20px; font-weight: 600; letter-spacing: -0.005em; line-height: 1.2; }
.t-body    { font-size: 15px; font-weight: 400; line-height: 1.55; color: var(--ink-2); }
.t-body-lg { font-size: 18px; font-weight: 400; line-height: 1.6; color: var(--ink-2); }
.t-body-sm { font-size: 13px; line-height: 1.5; color: var(--ink-2); }
.t-mono    { font-family: var(--font-mono); font-size: 12px; letter-spacing: var(--track-mono); color: var(--ink-3); }
.t-eyebrow { font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--ink-3); }
.t-emph    { font-family: var(--font-serif); font-style: italic; background: var(--brand-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }

/* ---- Buttons ---- */
.btn {
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.005em;
  padding: 10px 18px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: transform 120ms var(--ease), filter 120ms var(--ease), background var(--dur-fast) var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-brand {
  color: #FFFFFF;
  background: linear-gradient(180deg, #E8552A 0%, #D94A22 45%, #C44D1E 80%, #A8411A 100%);
  border: 1px solid #8A3514;
  box-shadow:
    inset 0 1px 0 rgba(255,200,170,0.35),
    inset 0 -1px 0 rgba(0,0,0,0.45),
    0 14px 28px -12px rgba(180,55,15,0.5),
    0 6px 16px -6px rgba(0,0,0,0.4);
  text-shadow: 0 1px 0 rgba(80,20,0,0.35);
}
.btn-brand:hover:not(:disabled) { filter: brightness(1.08); }

.btn-ghost {
  color: var(--ink-1);
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(0,0,0,0.15));
  border: 1px solid var(--glass-border);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}
.btn-ghost:hover:not(:disabled) { background: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(0,0,0,0.15)); }

.btn-danger {
  color: #F2B5B5;
  background: linear-gradient(180deg, rgba(184,67,67,0.22), rgba(120,38,38,0.28)), var(--surface-elevated);
  border: 1px solid rgba(184,67,67,0.40);
}

/* ---- Inputs (pressed-in well) ---- */
.input-well {
  position: relative;
  border-radius: 10px;
  background: #060609;
  border: 1px solid #1A1A1E;
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,0.65),
    inset 0 1px 0 rgba(0,0,0,0.5);
}
.input-well input,
.input-well textarea {
  width: 100%;
  box-sizing: border-box;
  background: transparent;
  border: none;
  outline: none;
  color: var(--ink-1);
  font-size: 15px;
  font-family: inherit;
  padding: 13px 14px;
  letter-spacing: -0.003em;
}
.input-well.focus {
  border-color: rgba(255,107,53,0.45);
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,0.6),
    inset 0 0 0 1px rgba(255,107,53,0.15),
    0 0 0 4px rgba(255,107,53,0.06);
}
.input-label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--ink-2);
  margin-bottom: 8px;
}

/* ---- Pills ---- */
.pill {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: var(--r-pill);
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.pill-live    { background: var(--brand-10);    color: var(--brand);   border: 1px solid var(--brand-30); }
.pill-success { background: var(--success-soft); color: var(--success); border: 1px solid rgba(127,167,118,0.28); }
.pill-warn    { background: var(--warn-soft);    color: var(--warn);    border: 1px solid rgba(200,162,74,0.28); }
.pill-error   { background: var(--error-soft);   color: var(--error);   border: 1px solid rgba(184,67,67,0.28); }
.pill-neutral { background: rgba(255,255,255,0.05); color: var(--ink-2); border: 1px solid var(--glass-border); }
.pill-live::before, .pill-warn::before {
  content:''; width:6px; height:6px; border-radius:50%;
  background: currentColor; box-shadow: 0 0 6px currentColor;
  animation: ds-pulse 1.6s ease-in-out infinite;
}
@keyframes ds-pulse { 0%,100% { opacity: .6 } 50% { opacity: 1 } }

/* ---- Cards (glass) ---- */
.card {
  position: relative;
  border-radius: var(--r-lg);
  padding: 22px;
  background: linear-gradient(180deg,
    rgba(255,255,255,0.045) 0%,
    rgba(255,255,255,0.025) 60%,
    rgba(0,0,0,0.15) 100%);
  border: 1px solid var(--glass-border);
  box-shadow:
    var(--shadow-inner-top),
    inset 0 -1px 0 rgba(0,0,0,0.35),
    0 18px 44px -24px rgba(0,0,0,0.6);
  backdrop-filter: blur(22px) saturate(1.1);
  -webkit-backdrop-filter: blur(22px) saturate(1.1);
}

/* ---- Rule divider ---- */
.rule {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--ink-3);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
}
.rule::before, .rule::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--ink-4), transparent);
}

/* ---- Scrollbars ---- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--ink-4); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #3E3E40; }

::selection { background: var(--brand-30); color: var(--ink-1); }
a { color: var(--steel); text-decoration: none; transition: color var(--dur-fast) var(--ease); }
a:hover { color: #B0CDF0; }