/* ═══════════════════════════════════════════════
   Service Delivery Hub — Design Tokens
   Shared across all apps via @import or <link>
   No external dependencies — all fonts are system
   ═══════════════════════════════════════════════ */

:root {
  /* ── Color: Primary (Indigo) ── */
  --color-primary-50:  #eef2ff;
  --color-primary-100: #e0e7ff;
  --color-primary-200: #c7d2fe;
  --color-primary-300: #a5b4fc;
  --color-primary-400: #818cf8;
  --color-primary-500: #6366f1;
  --color-primary-600: #4f46e5;
  --color-primary-700: #4338ca;
  --color-primary-800: #3730a3;
  --color-primary-900: #312e81;

  /* ── Color: Neutral (Slate) ── */
  --color-neutral-50:  #f8fafc;
  --color-neutral-100: #f1f5f9;
  --color-neutral-200: #e2e8f0;
  --color-neutral-300: #cbd5e1;
  --color-neutral-400: #94a3b8;
  --color-neutral-500: #64748b;
  --color-neutral-600: #475569;
  --color-neutral-700: #334155;
  --color-neutral-800: #1e293b;
  --color-neutral-900: #0f172a;

  /* ── Color: Semantic ── */
  --color-success-50:  #ecfdf5;
  --color-success:     #10b981;
  --color-success-700: #047857;

  --color-warning-50:  #fffbeb;
  --color-warning:     #f59e0b;
  --color-warning-700: #b45309;

  --color-danger-50:   #fef2f2;
  --color-danger:      #ef4444;
  --color-danger-700:  #b91c1c;

  --color-info-50:     #eff6ff;
  --color-info:        #3b82f6;
  --color-info-700:    #1d4ed8;

  /* ── Surfaces ── */
  --color-bg:          #ffffff;
  --color-bg-subtle:   var(--color-neutral-50);
  --color-bg-muted:    var(--color-neutral-100);
  --color-surface:     #ffffff;
  --color-overlay:     rgba(15, 23, 42, 0.5);

  /* ── Text ── */
  --color-text:           var(--color-neutral-900);
  --color-text-secondary: var(--color-neutral-500);
  --color-text-tertiary:  var(--color-neutral-400);
  --color-text-inverse:   #ffffff;
  --color-text-link:      var(--color-primary-600);
  --color-text-link-hover: var(--color-primary-700);

  /* ── Borders ── */
  --color-border:       var(--color-neutral-200);
  --color-border-hover: var(--color-neutral-300);
  --color-border-focus: var(--color-primary-500);

  /* ── Typography ── */
  --font-sans:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
    "Noto Sans CJK SC", "Source Han Sans SC",
    sans-serif, "Apple Color Emoji", "Segoe UI Emoji";

  --font-mono:
    "SF Mono", "Cascadia Code", "JetBrains Mono", Consolas,
    "Liberation Mono", Menlo, monospace;

  /* ── Type Scale ── */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  2rem;

  /* ── Line Heights ── */
  --leading-tight:   1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.75;   /* CJK body text */

  /* ── Font Weights ── */
  --font-normal:   400;
  --font-medium:   500;
  --font-semibold: 600;
  --font-bold:     700;

  /* ── Spacing (4px base) ── */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;

  /* ── Border Radius ── */
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   8px;
  --radius-xl:   12px;
  --radius-full: 9999px;

  /* ── Shadows ── */
  --shadow-sm:
    0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md:
    0 4px 6px -1px rgba(0, 0, 0, 0.07),
    0 2px 4px -2px rgba(0, 0, 0, 0.05);
  --shadow-lg:
    0 10px 15px -3px rgba(0, 0, 0, 0.08),
    0 4px 6px -4px rgba(0, 0, 0, 0.04);
  --shadow-xl:
    0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 8px 10px -6px rgba(0, 0, 0, 0.04);

  /* ── Focus Ring ── */
  --ring-focus:
    0 0 0 2px var(--color-bg),
    0 0 0 4px var(--color-primary-500);

  /* ── Layout ── */
  --max-width-prose:   768px;
  --max-width-content: 1200px;
  --max-width-wide:    1400px;

  /* ── Navbar ── */
  --navbar-height: 56px;

  /* ── Transitions ── */
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;

  /* ── Z-Index ── */
  --z-sticky:   20;
  --z-navbar:   30;
  --z-modal:    40;
  --z-toast:    50;
}


/* ═══════════════════════════════════════════════
   Base Reset & Defaults
   ═══════════════════════════════════════════════ */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-text);
  background: var(--color-bg-subtle);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
}


/* ═══════════════════════════════════════════════
   Shared Navbar
   ═══════════════════════════════════════════════ */

.sdh-navbar {
  height: var(--navbar-height);
  background: var(--color-neutral-900);
  border-bottom: 1px solid var(--color-neutral-800);
  position: sticky;
  top: 0;
  z-index: var(--z-navbar);
  display: flex;
  align-items: center;
  padding: 0 var(--space-6);
}

.sdh-navbar-inner {
  width: 100%;
  max-width: var(--max-width-wide);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.sdh-navbar-brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  color: var(--color-text-inverse);
  font-family: var(--font-sans);
  font-weight: var(--font-semibold);
  font-size: var(--text-base);
  white-space: nowrap;
  transition: opacity var(--transition-fast);
}

.sdh-navbar-brand:hover {
  opacity: 0.85;
}

.sdh-navbar-nav {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.sdh-navbar-link {
  display: inline-flex;
  align-items: center;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  color: var(--color-neutral-400);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  text-decoration: none;
  transition: color var(--transition-fast), background var(--transition-fast);
}

.sdh-navbar-link:hover {
  color: var(--color-text-inverse);
  background: rgba(255, 255, 255, 0.08);
}

.sdh-navbar-link.active,
.sdh-navbar-link[aria-current="page"] {
  color: var(--color-text-inverse);
  background: rgba(255, 255, 255, 0.12);
}

.sdh-navbar-right {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-left: auto;
}

.sdh-navbar-user {
  color: var(--color-neutral-400);
  font-size: var(--text-sm);
}

.sdh-navbar-divider {
  width: 1px;
  height: 20px;
  background: var(--color-neutral-700);
}


/* ═══════════════════════════════════════════════
   Buttons
   ═══════════════════════════════════════════════ */

.sdh-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  line-height: 1;
  cursor: pointer;
  transition: all var(--transition-fast);
  text-decoration: none;
  white-space: nowrap;
}

.sdh-btn:focus-visible {
  outline: none;
  box-shadow: var(--ring-focus);
}

.sdh-btn-primary {
  background: var(--color-primary-600);
  color: var(--color-text-inverse);
  border-color: var(--color-primary-600);
}

.sdh-btn-primary:hover {
  background: var(--color-primary-700);
  border-color: var(--color-primary-700);
}

.sdh-btn-secondary {
  background: var(--color-bg);
  color: var(--color-text);
  border-color: var(--color-border);
}

.sdh-btn-secondary:hover {
  background: var(--color-bg-subtle);
  border-color: var(--color-border-hover);
}

.sdh-btn-danger {
  background: var(--color-danger);
  color: var(--color-text-inverse);
  border-color: var(--color-danger);
}

.sdh-btn-danger:hover {
  background: var(--color-danger-700);
  border-color: var(--color-danger-700);
}

.sdh-btn-ghost {
  background: transparent;
  color: var(--color-text-secondary);
  border-color: transparent;
}

.sdh-btn-ghost:hover {
  background: var(--color-bg-muted);
  color: var(--color-text);
}

.sdh-btn-sm {
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
}

.sdh-btn-lg {
  padding: var(--space-3) var(--space-6);
  font-size: var(--text-base);
}


/* ═══════════════════════════════════════════════
   Cards
   ═══════════════════════════════════════════════ */

.sdh-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}

.sdh-card-elevated {
  box-shadow: var(--shadow-sm);
  border-color: transparent;
}

.sdh-card-interactive {
  transition: box-shadow var(--transition-base), border-color var(--transition-base), transform var(--transition-base);
  cursor: pointer;
}

.sdh-card-interactive:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--color-primary-200);
  transform: translateY(-1px);
}


/* ═══════════════════════════════════════════════
   Badges
   ═══════════════════════════════════════════════ */

.sdh-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--space-2);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  letter-spacing: 0.02em;
}

.sdh-badge-primary {
  background: var(--color-primary-50);
  color: var(--color-primary-700);
}

.sdh-badge-success {
  background: var(--color-success-50);
  color: var(--color-success-700);
}

.sdh-badge-warning {
  background: var(--color-warning-50);
  color: var(--color-warning-700);
}

.sdh-badge-danger {
  background: var(--color-danger-50);
  color: var(--color-danger-700);
}


/* ═══════════════════════════════════════════════
   Forms
   ═══════════════════════════════════════════════ */

.sdh-input {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--color-text);
  background: var(--color-bg);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.sdh-input:focus {
  outline: none;
  border-color: var(--color-primary-500);
  box-shadow: 0 0 0 3px var(--color-primary-50);
}

.sdh-input::placeholder {
  color: var(--color-text-tertiary);
}

.sdh-label {
  display: block;
  margin-bottom: var(--space-1);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-text);
}


/* ═══════════════════════════════════════════════
   Tables
   ═══════════════════════════════════════════════ */

.sdh-table {
  width: 100%;
  border-collapse: collapse;
}

.sdh-table th {
  text-align: left;
  padding: var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--color-border);
}

.sdh-table td {
  padding: var(--space-3);
  font-size: var(--text-sm);
  border-bottom: 1px solid var(--color-neutral-100);
}

.sdh-table tbody tr:hover {
  background: var(--color-bg-subtle);
}


/* ═══════════════════════════════════════════════
   Utility Classes
   ═══════════════════════════════════════════════ */

.sdh-container {
  max-width: var(--max-width-content);
  margin: 0 auto;
  padding: 0 var(--space-6);
}

.sdh-container-wide {
  max-width: var(--max-width-wide);
}

.sdh-container-prose {
  max-width: var(--max-width-prose);
}

.sdh-heading {
  font-family: var(--font-sans);
  font-weight: var(--font-bold);
  line-height: var(--leading-tight);
  color: var(--color-text);
  letter-spacing: -0.02em;
}


/* ═══════════════════════════════════════════════
   Responsive
   ═══════════════════════════════════════════════ */

@media (max-width: 768px) {
  .sdh-navbar {
    padding: 0 var(--space-4);
  }

  .sdh-navbar-nav {
    gap: 0;
  }

  .sdh-navbar-link {
    padding: var(--space-2);
  }

  .sdh-navbar-user {
    display: none;
  }

  .sdh-container {
    padding: 0 var(--space-4);
  }
}