/* ============================================
   SP.com Design System — Claude Dark Mode
   colors, type, spacing, radii, shadows
   ============================================ */

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

/* ----------------------------------------
   BASE TOKENS — DARK (default)
   ---------------------------------------- */
:root,
[data-theme="claude"][data-mode="dark"] {
  /* Surfaces (warm near-blacks) */
  --bg-000: #30302E;     /* raised surface (cards, popovers) */
  --bg-100: #262625;     /* main page background */
  --bg-200: #1F1E1D;     /* secondary surface (sidebar, header) */
  --bg-300: #141413;     /* deep surface (code, modal base) */
  --bg-400: #000000;     /* extreme dark (rare) */

  /* Text */
  --text-000: #FAF9F5;
  --text-100: #FAF9F5;   /* body */
  --text-200: #C2BFB6;   /* secondary */
  --text-300: #C2BFB6;   /* nav */
  --text-400: #9B9992;   /* muted */
  --text-500: #9B9992;

  /* Borders — warm light, used at low opacity */
  --border-rgb: 222, 220, 209;
  --border-100: rgba(var(--border-rgb), 0.08);
  --border-200: rgba(var(--border-rgb), 0.12);
  --border-300: rgba(var(--border-rgb), 0.18);
  --border-400: rgba(var(--border-rgb), 0.30);

  /* Brand — Claude orange */
  --brand-000: #C6613F;  /* pressed */
  --brand-100: #D97757;  /* primary brand */
  --brand-200: #E68A6F;  /* hover */
  --accent-brand: #D97757;

  /* Deep Teal — progress bars, informational accents */
  --deep-teal: #3E8E8A;

  /* Accent — link blue (lighter in dark) */
  --accent-000: #75ABE2;
  --accent-100: #8FBDE7;
  --accent-200: #8FBDE7;
  --accent-900: #1C3F62;

  /* Semantic */
  --success-000: #B8E0A0;
  --success-100: #7AB55C;
  --success-200: #5C9942;
  --success-900: #1F2E14;

  --warning-000: #F0CB7A;
  --warning-100: #E0B055;
  --warning-200: #B88A3A;
  --warning-900: #3A2A0F;

  --danger-000: #F0A0A0;
  --danger-100: #E06A6A;
  --danger-200: #B53333;
  --danger-900: #3A1818;

  /* On-color (text over filled buttons) */
  --oncolor-100: #FFFFFF;
  --oncolor-200: #F8F8F7;

  /* Pictogram tiles */
  --pictogram-100: #1F1E1D;
  --pictogram-200: #30302E;
  --pictogram-300: #FAF9F5;
  --pictogram-400: #262625;

  /* ---------- app shell ---------- */
  --shell-sidebar-bg: #1F1E1D;
  --shell-sidebar-border: rgba(var(--border-rgb), 0.10);
  --shell-sidebar-hover-bg: rgba(var(--border-rgb), 0.06);
  --shell-sidebar-active-bg: rgba(var(--border-rgb), 0.10);
  --shell-sidebar-active-border: rgba(var(--border-rgb), 0.12);
  --shell-nav-text: var(--text-300);
  --shell-nav-active-text: var(--text-100);
  --shell-nav-section: #A7A39A;

  /* ---------- surfaces ---------- */
  --surface-page: var(--bg-100);
  --surface-card: #30302E;
  --surface-card-header: #2B2A28;
  --surface-card-raised: #343331;
  --surface-table-header: #201F1E;
  --surface-table-row-hover: rgba(var(--border-rgb), 0.05);

  /* ---------- links ---------- */
  --link-primary: var(--accent-000);
  --link-primary-hover: var(--accent-100);
  --link-muted: var(--text-400);

  /* ---------- badges ---------- */
  --badge-neutral-bg: rgba(var(--border-rgb), 0.08);
  --badge-neutral-text: var(--text-300);
  --badge-info-bg: rgba(117, 171, 226, 0.16);
  --badge-info-text: #8FBDE7;
  --badge-success-bg: rgba(122, 181, 92, 0.16);
  --badge-success-text: #B8E0A0;
  --badge-warning-bg: rgba(224, 176, 85, 0.16);
  --badge-warning-text: #F0CB7A;
  --badge-danger-bg: rgba(224, 106, 106, 0.16);
  --badge-danger-text: #F0A0A0;

  /* ---------- typography ---------- */
  --font-ui: 'Inter', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --font-display: var(--font-ui);

  /* type scale */
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-base: 14px;
  --fs-md: 15px;
  --fs-lg: 16px;
  --fs-xl: 18px;
  --fs-2xl: 22px;
  --fs-3xl: 28px;
  --fs-4xl: 36px;
  --fs-5xl: 48px;
  --fs-6xl: 64px;

  /* line-height */
  --lh-tight: 1.15;
  --lh-snug: 1.3;
  --lh-normal: 1.5;
  --lh-relaxed: 1.6;

  /* tracking */
  --tracking-tight: -0.02em;
  --tracking-snug: -0.01em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-eyebrow: 0.08em;

  /* weights */
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* ---------- spacing ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ---------- radii ---------- */
  --r-sm: 4px;     /* standard radius */
  --r-md: 4px;     /* standard radius */
  --r-lg: 4px;     /* standard radius */
  --r-xl: 4px;     /* standard radius */
  --r-pill: 4px;   /* standard radius */

  /* ---------- shadows (sparing) ---------- */
  --shadow-pop: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-menu: 0 4px 16px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.6), 0 8px 16px rgba(0, 0, 0, 0.4);

  /* ---------- focus ring ---------- */
  --focus-ring: 0 0 0 3px rgba(217, 119, 87, 0.35);
  --focus-ring-link: 0 0 0 3px rgba(117, 171, 226, 0.35);

  /* ---------- motion ---------- */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 120ms;
  --dur-base: 180ms;
  --dur-slow: 280ms;
}

/* ----------------------------------------
   LIGHT MODE (carried over from claude docs reference)
   ---------------------------------------- */
[data-theme="claude"][data-mode="light"] {
  /* Surfaces (warm whites) */
  --bg-000: #FFFFFF;
  --bg-100: #FAF9F5;
  --bg-200: #F5F4ED;
  --bg-300: #F0EEE6;
  --bg-400: #E8E6DC;

  /* Text */
  --text-000: #141413;
  --text-100: #141413;
  --text-200: #3D3D3A;
  --text-300: #3D3D3A;
  --text-400: #73726C;
  --text-500: #73726C;

  /* Borders */
  --border-rgb: 31, 30, 29;
  --border-100: rgba(var(--border-rgb), 0.08);
  --border-200: rgba(var(--border-rgb), 0.12);
  --border-300: rgba(var(--border-rgb), 0.18);
  --border-400: rgba(var(--border-rgb), 0.30);

  /* Brand — Claude orange (slightly deeper for light bg) */
  --brand-000: #B8522D;
  --brand-100: #C6613F;
  --brand-200: #D97757;
  --accent-brand: #C6613F;

  /* Deep Teal — progress bars, informational accents */
  --deep-teal: #2D7A77;

  /* Accent — link blue (darker for light bg) */
  --accent-000: #1B67B2;
  --accent-100: #2C84DB;
  --accent-200: #2C84DB;
  --accent-900: #D3E5F8;

  /* Semantic */
  --success-000: #2D7A16;
  --success-100: #3D9924;
  --success-200: #5CB83C;
  --success-900: #E8F5E2;

  --warning-000: #946200;
  --warning-100: #B87A00;
  --warning-200: #D99A00;
  --warning-900: #FFF8E1;

  --danger-000: #C62828;
  --danger-100: #E53935;
  --danger-200: #EF5350;
  --danger-900: #FFEBEE;

  /* On-color (text over filled buttons) */
  --oncolor-100: #FFFFFF;
  --oncolor-200: #F8F8F7;

  /* Pictogram tiles */
  --pictogram-100: #F5F4ED;
  --pictogram-200: #E8E6DC;
  --pictogram-300: #141413;
  --pictogram-400: #FAF9F5;

  /* ---------- app shell ---------- */
  --shell-sidebar-bg: #F5F4ED;
  --shell-sidebar-border: rgba(var(--border-rgb), 0.12);
  --shell-sidebar-hover-bg: rgba(var(--border-rgb), 0.06);
  --shell-sidebar-active-bg: rgba(var(--border-rgb), 0.10);
  --shell-sidebar-active-border: rgba(var(--border-rgb), 0.15);
  --shell-nav-text: var(--text-300);
  --shell-nav-active-text: var(--text-100);
  --shell-nav-section: #73726C;

  /* ---------- surfaces ---------- */
  --surface-page: var(--bg-100);
  --surface-card: #FFFFFF;
  --surface-card-header: #F8F7F2;
  --surface-card-raised: #FFFFFF;
  --surface-table-header: #F5F4ED;
  --surface-table-row-hover: rgba(var(--border-rgb), 0.04);

  /* ---------- links ---------- */
  --link-primary: var(--accent-000);
  --link-primary-hover: var(--accent-100);
  --link-muted: var(--text-400);

  /* ---------- badges ---------- */
  --badge-neutral-bg: rgba(var(--border-rgb), 0.06);
  --badge-neutral-text: var(--text-300);
  --badge-info-bg: rgba(27, 103, 178, 0.10);
  --badge-info-text: #1B67B2;
  --badge-success-bg: rgba(61, 153, 36, 0.10);
  --badge-success-text: #2D7A16;
  --badge-warning-bg: rgba(184, 122, 0, 0.10);
  --badge-warning-text: #946200;
  --badge-danger-bg: rgba(229, 57, 53, 0.10);
  --badge-danger-text: #C62828;

  /* ---------- shadows (softer for light) ---------- */
  --shadow-pop: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-menu: 0 4px 16px rgba(0, 0, 0, 0.10), 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.12), 0 8px 16px rgba(0, 0, 0, 0.08);

  /* ---------- focus ring ---------- */
  --focus-ring: 0 0 0 3px rgba(198, 97, 63, 0.25);
  --focus-ring-link: 0 0 0 3px rgba(27, 103, 178, 0.25);
}

/* ----------------------------------------
   BASE ELEMENTS
   ---------------------------------------- */
html, body {
  background-color: var(--bg-100);
  color: var(--text-100);
  font-family: var(--font-ui);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
  padding: 0;
}

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

::selection { background: rgba(217, 119, 87, 0.30); color: var(--text-100); }

/* ----------------------------------------
   SEMANTIC TYPE CLASSES
   ---------------------------------------- */
.t-eyebrow {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--text-400);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}

.t-display, h1.t-display {
  font-family: var(--font-display);
  font-size: var(--fs-6xl);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text-100);
  margin: 0;
}

.t-h1, h1 {
  font-size: var(--fs-4xl);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text-100);
  margin: 0;
}

.t-h2, h2 {
  font-size: var(--fs-3xl);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--text-100);
  margin: 0;
}

.t-h3, h3 {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--text-100);
  margin: 0;
}

.t-h4, h4 {
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--text-100);
  margin: 0;
}

.t-body, p {
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-relaxed);
  color: var(--text-200);
  margin: 0;
}

.t-body-strong { color: var(--text-100); font-weight: var(--fw-medium); }
.t-muted { color: var(--text-400); }
.t-secondary { color: var(--text-200); }

.t-small { font-size: var(--fs-sm); line-height: var(--lh-normal); }
.t-tiny { font-size: var(--fs-xs); line-height: var(--lh-normal); }

.t-mono, code, kbd, pre {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

code {
  background: var(--bg-200);
  border: 1px solid var(--border-200);
  padding: 1px 6px;
  border-radius: var(--r-sm);
  color: var(--text-100);
}

kbd {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  background: var(--bg-200);
  border: 1px solid var(--border-200);
  border-radius: var(--r-sm);
  color: var(--text-200);
}

a {
  color: var(--accent-000);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--accent-100); text-decoration: underline; text-underline-offset: 3px; }

/* ----------------------------------------
   BUTTONS
   ---------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  line-height: 1;
  height: 36px;
  padding: 0 14px;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-100);
  cursor: pointer;
  transition:
    background-color var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    color var(--dur-base) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
  white-space: nowrap;
}
.btn:active { transform: scale(0.97); }
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.btn-sm { height: 30px; padding: 0 10px; font-size: var(--fs-xs); }
.btn-lg { height: 44px; padding: 0 18px; font-size: var(--fs-base); }

.btn-primary {
  background: var(--text-100);
  color: var(--bg-100);
  border-color: var(--text-100);
}
.btn-primary:hover { background: var(--text-200); border-color: var(--text-200); }

.btn-brand {
  background: var(--brand-100);
  color: var(--oncolor-100);
  border-color: var(--brand-100);
}
.btn-brand:hover { background: var(--brand-200); border-color: var(--brand-200); }
.btn-brand:active { background: var(--brand-000); }

.btn-secondary {
  background: transparent;
  color: var(--text-100);
  border-color: var(--border-300);
}
.btn-secondary:hover { background: rgba(var(--border-rgb), 0.06); border-color: var(--border-400); }

.btn-ghost {
  background: transparent;
  color: var(--text-200);
  border-color: transparent;
}
.btn-ghost:hover { background: rgba(var(--border-rgb), 0.06); color: var(--text-100); }

.btn-danger {
  background: var(--danger-200);
  color: var(--oncolor-100);
  border-color: var(--danger-200);
}
.btn-danger:hover { background: var(--danger-100); border-color: var(--danger-100); }

/* ----------------------------------------
   INPUTS
   ---------------------------------------- */
.input, .select, .textarea {
  width: 100%;
  height: 36px;
  padding: 0 12px;
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  color: var(--text-100);
  background: var(--bg-200);
  border: 1px solid var(--border-200);
  border-radius: var(--r-md);
  transition: border-color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
}
.input::placeholder { color: var(--text-400); }
.input:hover { border-color: var(--border-300); }
.input:focus { outline: none; border-color: var(--brand-100); box-shadow: var(--focus-ring); background: var(--bg-100); }
.textarea { height: auto; min-height: 80px; padding: 10px 12px; line-height: var(--lh-normal); resize: vertical; }

/* ----------------------------------------
   CARDS
   ---------------------------------------- */
.card {
  background: var(--bg-000);
  border: 1px solid var(--border-200);
  border-radius: var(--r-md);
  padding: var(--space-6);
  transition: border-color var(--dur-base) var(--ease-out);
}
.card:hover { border-color: var(--border-300); }
.card-flush { padding: 0; }
.card-header { display: flex; align-items: center; justify-content: space-between; padding: 0 0 var(--space-4); border-bottom: 1px solid var(--border-100); margin-bottom: var(--space-4); }
.card-title { font-size: var(--fs-lg); font-weight: var(--fw-semibold); color: var(--text-100); }

/* ----------------------------------------
   BADGES
   ---------------------------------------- */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  height: 20px;
  padding: 0 8px;
  font-size: 11px;
  font-weight: var(--fw-medium);
  letter-spacing: 0.02em;
  border-radius: var(--r-sm);
  background: var(--bg-200);
  color: var(--text-200);
  border: 1px solid var(--border-200);
}
.badge-success { background: var(--success-900); color: var(--success-000); border-color: rgba(122, 181, 92, 0.25); }
.badge-warning { background: var(--warning-900); color: var(--warning-000); border-color: rgba(224, 176, 85, 0.25); }
.badge-danger { background: var(--danger-900); color: var(--danger-000); border-color: rgba(224, 106, 106, 0.25); }
.badge-info { background: var(--accent-900); color: var(--accent-000); border-color: rgba(117, 171, 226, 0.25); }
.badge-brand { background: rgba(217, 119, 87, 0.12); color: var(--brand-200); border-color: rgba(217, 119, 87, 0.30); }

/* ----------------------------------------
   APP SHELL
   ---------------------------------------- */
.docs-shell { min-height: 100vh; background: var(--bg-100); }
.docs-shell-grid { display: grid; grid-template-columns: 264px 1fr; }
.docs-header { position: sticky; top: 0; z-index: 50; height: 56px; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; background: var(--bg-100); border-bottom: 1px solid var(--border-100); }
.docs-sidebar { background: var(--bg-100); border-right: 1px solid var(--border-100); padding: 20px 16px; overflow-y: auto; }

/* ----------------------------------------
   TABLES
   ---------------------------------------- */
.data-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.data-table th { text-align: left; padding: 10px 12px; font-weight: var(--fw-medium); color: var(--text-400); border-bottom: 1px solid var(--border-200); background: var(--bg-200); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); }
.data-table td { padding: 12px; border-bottom: 1px solid var(--border-100); color: var(--text-200); }
.data-table tr:hover td { background: rgba(var(--border-rgb), 0.03); }
.data-table tr:last-child td { border-bottom: 0; }