/* Headspace-inspired Design System */

/* Base Typography */
body {
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 16px;
  line-height: 1.5;
  color: #2e2620;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  color: #2e2620;
  margin-bottom: 0.5em;
}

/* Headspace-style Cards */
.notion-card {
  background: white;
  border: 1px solid #e8e2d8;
  border-radius: 3px;
  padding: 16px;
  transition: all 150ms ease;
}

.notion-card:hover {
  background: #fafaf9;
  box-shadow: 0 2px 8px rgba(46, 38, 32, 0.08);
}

/* Headspace-style Buttons */
.notion-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 3px;
  font-size: 14px;
  font-weight: 500;
  transition: all 150ms ease;
  cursor: pointer;
  border: none;
  white-space: nowrap;
}

.notion-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 3px;
  font-size: 14px;
  font-weight: 500;
  transition: all 150ms ease;
  cursor: pointer;
  border: none;
  white-space: nowrap;
  background: #ff9f66;
  color: white;
}

.notion-btn-primary:hover {
  background: #ff8c4d;
  box-shadow: 0 2px 8px rgba(255, 159, 102, 0.3);
}

.notion-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 3px;
  font-size: 14px;
  font-weight: 500;
  transition: all 150ms ease;
  cursor: pointer;
  border: none;
  white-space: nowrap;
  background: #fff4ed;
  color: #ff9f66;
}

.notion-btn-secondary:hover {
  background: #ffe8db;
}

.notion-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 3px;
  font-size: 14px;
  font-weight: 500;
  transition: all 150ms ease;
  cursor: pointer;
  border: none;
  white-space: nowrap;
  background: transparent;
  color: #2e2620;
}

.notion-btn-ghost:hover {
  background: #f9f6f1;
}

/* Headspace-style Inputs */
.notion-input {
  width: 100%;
  padding: 8px 10px;
  font-size: 16px;
  line-height: 1.5;
  color: #2e2620;
  background: white;
  border: 1px solid #e8e2d8;
  border-radius: 3px;
  transition: all 150ms ease;
}

.notion-input:hover {
  border-color: #d4cdc0;
}

.notion-input:focus {
  outline: none;
  border-color: #ff9f66;
  box-shadow: 0 0 0 1px #ff9f66;
}

.notion-textarea {
  width: 100%;
  padding: 8px 10px;
  font-size: 16px;
  line-height: 1.5;
  color: #2e2620;
  background: white;
  border: 1px solid #e8e2d8;
  border-radius: 3px;
  transition: all 150ms ease;
  min-height: 120px;
  resize: vertical;
  font-family: inherit;
}

.notion-textarea:hover {
  border-color: #d4cdc0;
}

.notion-textarea:focus {
  outline: none;
  border-color: #ff9f66;
  box-shadow: 0 0 0 1px #ff9f66;
}

/* Notion-style Badges/Tags */
.notion-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}

.notion-badge-blue {
  background: #fff4ed;
  color: #ff9f66;
}

.notion-badge-green {
  background: #e8f7f0;
  color: #7fc4a5;
}

.notion-badge-red {
  background: #ffe8e5;
  color: #f45d48;
}

.notion-badge-yellow {
  background: #fff8e5;
  color: #d4a835;
}

.notion-badge-purple {
  background: #f3eef9;
  color: #a78bca;
}

.notion-badge-gray {
  background: #f5f2ee;
  color: #9d9388;
}

/* Headspace-style Sidebar */
.notion-sidebar {
  background: #f9f6f1;
  border-right: 1px solid #e8e2d8;
}

.notion-sidebar-item {
  padding: 4px 14px;
  margin: 1px 0;
  border-radius: 3px;
  font-size: 14px;
  color: #2e2620;
  transition: background 150ms ease;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
}

.notion-sidebar-item:hover {
  background: #f0eae0;
}

.notion-sidebar-item.active {
  background: #fff4ed;
  color: #ff9f66;
  font-weight: 500;
}

/* Notion-style Content Container */
.notion-page {
  max-width: 900px;
  margin: 0 auto;
  padding: 60px 96px 30vh;
}

.notion-page-title {
  font-size: 40px;
  line-height: 1.2;
  font-weight: 700;
  color: #2e2620;
  margin-bottom: 4px;
}

.notion-page-subtitle {
  font-size: 16px;
  color: #6e675f;
  margin-bottom: 24px;
}

/* Notion-style Divider */
.notion-divider {
  border: none;
  border-top: 1px solid #e9e9e7;
  margin: 16px 0;
}

/* Notion-style Link */
.notion-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(55, 53, 47, 0.16);
  transition: all 150ms ease;
}

.notion-link:hover {
  border-bottom-color: rgba(46, 38, 32, 0.4);
}

/* Headspace-style Menu/Dropdown */
.notion-menu {
  background: white;
  border-radius: 3px;
  box-shadow: 0 2px 8px rgba(46, 38, 32, 0.08), 0 0 0 1px rgba(46, 38, 32, 0.05);
  padding: 6px;
  min-width: 180px;
}

.notion-menu-item {
  padding: 6px 8px;
  border-radius: 3px;
  font-size: 14px;
  color: #2e2620;
  cursor: pointer;
  transition: background 150ms ease;
  display: flex;
  align-items: center;
  gap: 8px;
}

.notion-menu-item:hover {
  background: #f9f6f1;
}

/* Notion-style Table */
.notion-table {
  width: 100%;
  border-collapse: collapse;
}

.notion-table th {
  text-align: left;
  padding: 10px 12px;
  font-size: 14px;
  font-weight: 500;
  color: #787774;
  border-bottom: 1px solid #e9e9e7;
}

.notion-table td {
  padding: 10px 12px;
  font-size: 14px;
  border-bottom: 1px solid #e9e9e7;
}

.notion-table tr:hover {
  background: #fafaf9;
}

/* Notion-style Empty State */
.notion-empty {
  text-align: center;
  padding: 48px 24px;
  color: #6e675f;
}

/* Headspace-style Loading Skeleton */
.notion-skeleton {
  background: linear-gradient(90deg, #f5f2ee 25%, #fafaf9 50%, #f5f2ee 75%);
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
  border-radius: 3px;
}

@keyframes loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Scrollbar Styling (Headspace-like) */
::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(157, 147, 136, 0.3);
  border-radius: 10px;
  border: 3px solid transparent;
  background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(157, 147, 136, 0.5);
  border: 3px solid transparent;
  background-clip: padding-box;
}

/* Tabs */
.tab-link {
  padding: 8px 4px;
  color: #6e675f;
  font-size: 14px;
  font-weight: 500;
  border-bottom: 2px solid transparent;
  transition: all 150ms ease;
  cursor: pointer;
  background: transparent;
  border-top: none;
  border-left: none;
  border-right: none;
}

.tab-link:hover {
  color: #2e2620;
}

.tab-link.active {
  color: #ff9f66;
  border-bottom-color: #ff9f66;
}

/* Selection Color */
::selection {
  background: rgba(255, 159, 102, 0.25);
}