/* Luma visual polish v2
 * A quiet editorial workspace: warm surfaces, restrained depth, clear modules.
 */
:root {
  --luma-paper: #f7f7f5;
  --luma-ink: #20242a;
  --luma-muted: #77808b;
  --luma-line: color-mix(in srgb, var(--border) 82%, transparent);
  --luma-accent: #5d718d;
  --luma-green: #668477;
  --luma-warm: #a98156;
  --luma-shadow-sm: 0 2px 10px rgba(31, 35, 41, .045);
  --luma-shadow-md: 0 14px 32px rgba(31, 35, 41, .075);
}

:root[data-theme="dark"] {
  --luma-paper: #1b1e22;
  --luma-ink: #eef0f2;
  --luma-muted: #9aa1aa;
  --luma-line: color-mix(in srgb, var(--border) 88%, transparent);
  --luma-accent: #9bacc4;
  --luma-green: #99b8a9;
  --luma-warm: #d0ab7c;
  --luma-shadow-sm: 0 2px 12px rgba(0, 0, 0, .18);
  --luma-shadow-md: 0 18px 38px rgba(0, 0, 0, .26);
}

/* Off-canvas drawers must not create a phantom horizontal scroll range. */
html { overflow-x: clip; }

/* Shared rhythm and control language. */
:where(.home-primary-button, .learning-add-button, .projects-add-button, .inbox-primary-button, .new-note-button, .auth-submit) {
  border-radius: 10px;
  box-shadow: 0 7px 18px color-mix(in srgb, currentColor 5%, transparent);
  transition: transform 180ms var(--ux-ease, ease), box-shadow 180ms var(--ux-ease, ease), background-color 180ms ease;
}
:where(.home-primary-button, .learning-add-button, .projects-add-button, .inbox-primary-button, .new-note-button, .auth-submit):hover {
  transform: translateY(-1px);
  box-shadow: var(--luma-shadow-md);
}
:where(.home-space-card, .learning-card, .project-card, .inbox-card, .learning-stats div, .projects-stats div, .inbox-stat) {
  border-color: var(--luma-line);
  box-shadow: var(--luma-shadow-sm);
}
:where(.home-space-card, .learning-card, .project-card, .inbox-card):focus-within {
  outline: 2px solid color-mix(in srgb, var(--accent) 38%, transparent);
  outline-offset: 3px;
}

/* Home: a calmer, more intentional entry point. */
.luma-home { background: var(--luma-paper); }
.home-topbar {
  border-bottom-color: var(--luma-line);
  background: color-mix(in srgb, var(--luma-paper) 94%, transparent);
  backdrop-filter: blur(18px) saturate(1.05);
}
.home-nav { border-color: var(--luma-line); background: color-mix(in srgb, var(--surface-soft) 75%, transparent); }
.home-nav button { min-height: 34px; }
.home-nav button.active { box-shadow: var(--luma-shadow-sm); }
.home-hero { gap: clamp(42px, 6vw, 86px); }
.home-visual { border-radius: 18px; box-shadow: var(--luma-shadow-md); }
.home-hero-copy h1 { font-size: clamp(36px, 3.6vw, 54px); line-height: 1.16; }
.home-hero-copy h1 em { color: var(--luma-accent); }
.home-description { max-width: 500px; color: var(--text-secondary); line-height: 1.9; }
.home-spaces { padding-top: 8px; }
.home-section-heading { margin-bottom: 22px; }
.home-space-grid { gap: 16px; }
.home-space-card {
  min-height: 204px;
  padding: 20px;
  border-radius: 15px;
  background: color-mix(in srgb, var(--surface) 94%, var(--luma-paper));
}
.home-space-card::before {
  position: absolute;
  top: 0;
  right: 20px;
  left: 20px;
  height: 2px;
  border-radius: 0 0 2px 2px;
  background: color-mix(in srgb, var(--accent) 36%, transparent);
  content: "";
}
.home-space-card.learning::before { background: color-mix(in srgb, var(--luma-green) 62%, transparent); }
.home-space-card.projects::before { background: color-mix(in srgb, var(--luma-accent) 62%, transparent); }
.home-space-card:hover { border-color: color-mix(in srgb, var(--accent) 34%, var(--border)); box-shadow: var(--luma-shadow-md); }
.home-card-icon { width: 38px; height: 38px; border-radius: 10px; background: var(--surface-soft); }
.home-card-copy strong { font-size: 16px; letter-spacing: -.015em; }
.home-card-copy em { max-width: 230px; line-height: 1.7; }

/* Workspace chrome: clear layers without a paper-sheet illusion. */
.app-shell { background: var(--luma-paper); }
.sidebar, .outline-panel { background: color-mix(in srgb, var(--luma-paper) 92%, var(--surface)); }
.sidebar { border-right-color: var(--luma-line); box-shadow: 8px 0 30px rgba(31, 35, 41, .025); }
.outline-panel { border-left-color: var(--luma-line); box-shadow: -8px 0 30px rgba(31, 35, 41, .025); }
.brand-row { height: 62px; }
.brand { letter-spacing: -.035em; }
.brand-mark, .home-brand-mark { border-radius: 10px; box-shadow: 0 5px 14px rgba(51, 112, 255, .13); }
.new-note-button { height: 42px; margin: 8px 12px 11px; border-radius: 10px; background: #4e6a8a; }
.new-note-button:hover { background: #3f5774; }
.quick-actions { padding-bottom: 10px; }
.quick-actions button { min-height: 38px; border-radius: 9px; }
.search-wrap input { height: 39px; border-color: var(--luma-line); background: color-mix(in srgb, var(--surface-soft) 75%, transparent); border-radius: 10px; }
.search-wrap input:focus { background: var(--surface); }
.library-heading { padding-top: 14px; }
.sidebar .note-item { height: 38px; margin: 3px 0; border-radius: 10px; }
.sidebar .note-item.active { box-shadow: inset 3px 0 0 var(--accent), var(--luma-shadow-sm); }
.sidebar .tree-group.shared-group { margin-top: 14px; }
.learning-nav, .projects-nav { border-radius: 14px; box-shadow: var(--luma-shadow-sm); }
.learning-nav-icon, .projects-nav-icon { background: color-mix(in srgb, var(--accent) 82%, #27313a); box-shadow: none; }
.learning-nav:hover, .learning-nav.active, .projects-nav:hover, .projects-nav.active { transform: translateY(-1px); box-shadow: var(--luma-shadow-md); }
.sidebar-footer { min-height: 60px; border-top-color: var(--luma-line); }

.main-panel { background: var(--luma-paper); }
.topbar {
  height: 60px;
  border-bottom-color: var(--luma-line);
  background: color-mix(in srgb, var(--luma-paper) 92%, transparent);
  box-shadow: 0 5px 18px rgba(31, 35, 41, .025);
}
.breadcrumb strong { color: var(--text); font-weight: 620; }
.mode-switch, .workspace-switch { border-color: var(--luma-line); border-radius: 9px; }
.mode-switch button.active { color: var(--text); }
.format-bar { height: 48px; border-bottom-color: var(--luma-line); background: var(--surface); box-shadow: 0 5px 18px rgba(31, 35, 41, .028); }
.format-bar select, .format-bar > button { min-height: 34px; }
.format-bar > button:hover { background: var(--surface-soft); }
.document-scroller { background: var(--luma-paper); }
.document-page { padding-top: 46px; padding-bottom: 120px; background: transparent; }
.document-title { max-width: 980px; font-size: clamp(34px, 4vw, 48px); letter-spacing: -.055em; }
.document-meta { margin-bottom: 30px; }
.block-row:hover { background: color-mix(in srgb, var(--surface) 44%, transparent); }
.block-row.active { box-shadow: inset 2px 0 0 color-mix(in srgb, var(--accent) 68%, transparent); }
.outline-head { height: 60px; border-bottom-color: var(--luma-line); }
.outline-list { padding-top: 14px; }
.outline-list button { border-radius: 9px; }

/* Learning board: quiet card library instead of a poster wall. */
.learning-page {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent-soft) 26%, var(--luma-paper)), var(--luma-paper) 27%);
}
.learning-page-inner, .projects-page-inner, .inbox-page-inner { padding-top: clamp(34px, 5vw, 64px); }
.learning-hero, .projects-hero { padding-bottom: 28px; border-bottom: 1px solid var(--luma-line); }
.learning-hero-copy > div > span, .projects-hero-copy > div > span { color: var(--luma-accent); }
.learning-hero h1, .projects-hero h1, .inbox-hero h1 { letter-spacing: -.055em; }
.learning-stats div, .projects-stats div { min-width: 96px; border-radius: 13px; background: color-mix(in srgb, var(--surface) 92%, transparent); }
.learning-create-form { margin-top: 24px; padding: 9px 10px 9px 16px; border-color: var(--luma-line); border-radius: 15px; box-shadow: var(--luma-shadow-sm); }
.learning-create-form input { height: 46px; }
.learning-create-form button { border-radius: 10px; background: #587596; }
.learning-page-toolbar { margin-top: 34px; }
.learning-filters, .projects-filters, .inbox-filters { border: 1px solid var(--luma-line); }
.learning-page-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.learning-card {
  min-height: 206px;
  padding: 19px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface) 96%, var(--luma-paper));
}
.learning-card::after {
  position: absolute;
  right: 19px;
  bottom: 0;
  left: 19px;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: color-mix(in srgb, var(--luma-green) 54%, transparent);
  content: "";
}
.learning-card[data-tone="1"]::after, .learning-card[data-tone="4"]::after { background: color-mix(in srgb, var(--luma-accent) 52%, transparent); }
.learning-card-title { margin-top: 21px; font-size: 16px; }
.learning-card-state { background: color-mix(in srgb, var(--luma-green) 12%, var(--surface)); color: var(--luma-green); }
.learning-card-actions button { width: 36px; height: 36px; }
.learning-note-link { min-height: 42px; background: color-mix(in srgb, var(--surface-soft) 80%, transparent); }
.learning-page-empty > span, .projects-empty > span { background: color-mix(in srgb, var(--accent) 76%, #314354); box-shadow: none; }

/* Practice board: turn project cards into portfolio records. */
.projects-page {
  background: linear-gradient(180deg, color-mix(in srgb, #5d718d 8%, var(--luma-paper)), var(--luma-paper) 26%);
}
.projects-add-button { background: #536f92; }
.projects-add-button:hover { background: #405b7a; }
.projects-grid { gap: 20px; }
.project-card { border-radius: 16px; box-shadow: var(--luma-shadow-sm); }
.project-card:hover { transform: translateY(-3px); box-shadow: var(--luma-shadow-md); }
.project-card-media { background: #e8ecef; color: #43576d; }
.project-card-media[data-tone="1"] { background: #dfe8ee; }
.project-card-media[data-tone="2"] { background: #e4ece8; }
.project-card-media[data-tone="3"] { background: #eee5dc; }
.project-card-media[data-tone="4"] { background: #e2e5ed; }
.project-card-media::after { background: linear-gradient(180deg, transparent 42%, rgba(41, 51, 62, .1)); }
.project-card-grid { border-color: rgba(65, 86, 107, .12); background-image: linear-gradient(rgba(65,86,107,.1) 1px, transparent 1px), linear-gradient(90deg, rgba(65,86,107,.1) 1px, transparent 1px); }
.project-card-initial { border-color: rgba(60, 79, 97, .2); background: rgba(255,255,255,.34); color: #3c536a; box-shadow: none; backdrop-filter: blur(8px); }
.project-status, .project-portfolio-mark { background: rgba(255,255,255,.72); color: #425469; border: 1px solid rgba(65, 86, 107, .16); backdrop-filter: blur(8px); }
.project-card-actions button { border-color: rgba(65,86,107,.2); background: rgba(255,255,255,.74); color: #425469; }
.project-card-actions button:hover { background: #fff; color: #263d56; }
.project-card-body h2 { font-size: 16px; }
.project-tech-list span { border-radius: 7px; background: color-mix(in srgb, var(--surface-soft) 90%, transparent); }
.project-link-icon, .project-relation { border-radius: 8px; }

/* Inbox: make capture feel like a useful queue, not a generic card grid. */
.inbox-page { background: var(--luma-paper); }
.inbox-hero { padding-bottom: 30px; border-bottom-color: var(--luma-line); }
.inbox-primary-button { background: #4f6a88; }
.inbox-primary-button:hover { background: #3f5873; }
.inbox-toolbar { margin-top: 30px; }
.inbox-grid { gap: 16px; }
.inbox-card { min-height: 246px; padding: 20px; border-radius: 15px; background: color-mix(in srgb, var(--surface) 96%, var(--luma-paper)); }
.inbox-card:hover { box-shadow: var(--luma-shadow-md); }
.inbox-kind { border: 1px solid var(--luma-line); border-radius: 7px; background: var(--surface-soft); }
.inbox-card h2 { font-size: 18px; }
.inbox-card-actions { gap: 7px; }
.inbox-card-actions button { min-height: 38px; border-radius: 8px; }
.inbox-card-actions button:first-child { border-color: color-mix(in srgb, var(--accent) 28%, var(--border)); }

/* Capture, AI, share and form surfaces use one dialog language. */
:where(.capture-dialog, .ai-dialog, .share-dialog, .password-dialog, .import-dialog, .learning-dialog, .projects-dialog, .shortcut-dialog, .ux-confirm-dialog) {
  border-radius: 18px;
  border-color: var(--luma-line);
  box-shadow: 0 24px 70px rgba(31, 35, 41, .2);
}
:where(.capture-dialog, .ai-dialog, .share-dialog, .password-dialog, .import-dialog, .learning-dialog, .projects-dialog)::backdrop { background: rgba(21, 28, 35, .48); backdrop-filter: blur(4px); }
:where(.capture-dialog-head, .dialog-head, .learning-dialog-head, .projects-dialog-head) { background: color-mix(in srgb, var(--surface-soft) 38%, var(--surface)); }
:where(.capture-dialog input, .capture-dialog textarea, .ai-dialog textarea, .share-dialog input, .password-dialog input, .import-dialog textarea, .learning-dialog textarea, .learning-dialog select, .projects-dialog input, .projects-dialog textarea, .projects-dialog select) { border-radius: 10px; }
:where(.capture-dialog-actions, .dialog-actions, .learning-dialog-actions, .projects-dialog-actions, .import-dialog-actions) { border-top-color: var(--luma-line); }

@media (max-width: 920px) {
  .topbar { height: 56px; }
  .learning-page, .projects-page, .inbox-page { top: 52px; }
  .document-page { padding-top: 34px; }
}
@media (max-width: 1180px) and (min-width: 721px) {
  .learning-page-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .home-space-card { min-height: 164px; }
  .learning-page-inner, .projects-page-inner, .inbox-page-inner { padding-top: 28px; }
  .learning-card, .project-card, .inbox-card { border-radius: 14px; }
  .learning-card-title { font-size: 15px; }
  .document-title { font-size: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  :where(.home-primary-button, .learning-add-button, .projects-add-button, .inbox-primary-button, .new-note-button, .auth-submit, .home-space-card, .learning-card, .project-card, .inbox-card) { transition: none; }
}