/* Loona: Notion-style skin for AFFiNE 0.27.4. Overrides AFFiNE's theme variables plus a few data-testid hooks.
   Hashed class names (._abc123) are avoided on purpose: they change every release. */

html[data-theme="light"] {
  --n-bg: #ffffff;
  --n-side: #f7f7f5;
  --n-text: #37352f;
  --n-text-2: #787774;
  --n-text-3: #9b9a97;
  --n-hover: rgba(55, 53, 47, 0.06);
  --n-border: #e9e9e7;
  --n-accent: #2383e2;
}
html[data-theme="dark"] {
  --n-bg: #191919;
  --n-side: #202020;
  --n-text: #d4d4d4;
  --n-text-2: #9b9b9b;
  --n-text-3: #7f7f7f;
  --n-hover: rgba(255, 255, 255, 0.055);
  --n-border: #2f2f2f;
  --n-accent: #2383e2;
}

html[data-theme] {
  --n-font: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI Variable Display", "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif;
  --affine-font-family: var(--n-font);
  --affine-font-sans-family: var(--n-font);
  --affine-editor-width: 760px;

  --affine-v2-layer-background-primary: var(--n-bg);
  --affine-v2-layer-background-secondary: var(--n-side);
  --affine-v2-layer-background-hover: var(--n-hover);
  --affine-background-primary-color: var(--n-bg);
  --affine-background-secondary-color: var(--n-side);
  --affine-hover-color: var(--n-hover);

  --affine-v2-text-primary: var(--n-text);
  --affine-v2-text-secondary: var(--n-text-2);
  --affine-v2-text-tertiary: var(--n-text-3);
  --affine-text-primary-color: var(--n-text);
  --affine-text-secondary-color: var(--n-text-2);
  --affine-placeholder-color: var(--n-text-3);
  --affine-v2-icon-primary: var(--n-text-2);
  --affine-v2-icon-secondary: var(--n-text-3);
  --affine-icon-color: var(--n-text-2);

  --affine-border-color: var(--n-border);
  --affine-divider-color: var(--n-border);
  --affine-v2-layer-insideBorder-border: var(--n-border);

  --affine-primary-color: var(--n-accent);
  --affine-brand-color: var(--n-accent);
  --affine-v2-button-primary: var(--n-accent);
  --affine-v2-icon-activated: var(--n-accent);
  --affine-v2-text-link: var(--n-accent);
  --affine-link-color: var(--n-accent);
}

body { font-family: var(--n-font); }

/* Sidebar: the grey Notion column, tighter 14px rows */
[data-testid="app-sidebar-wrapper"] { background-color: var(--n-side) !important; border-right: 1px solid var(--n-border); }
[data-testid="app-sidebar"] { font-size: 14px; }
[data-testid="app-sidebar"] [data-testid="workspace-name"] { font-weight: 600; }

/* Page area */
[data-testid="main-container"] { background-color: var(--n-bg); }
[data-testid="header"] { border-bottom: 0 !important; }

/* Title: big and bold like a Notion page */
doc-title .doc-title-container { font-size: 40px; font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; color: var(--n-text); }

/* Body text a touch larger with Notion's line height */
page-editor affine-paragraph { font-size: 16px; line-height: 1.5; }

/* Cover band above every page title. Swap the file name to change it (dusk, moon, sage, sand, paper, aurora).
   shortcut: one cover for all pages; per-page covers need a fork. */
.affine-page-viewport .editor-wrapper.page-mode {
  /* Covers are 1500x400, so 26.7% (of width, as padding % always is) shows the whole image uncropped */
  background: url(/loona-bg/sage.svg) top center / 100% auto no-repeat;
  padding-top: calc(26.7% - 40px);
}

/* Databases: hairline grid, muted headers */
affine-database .affine-database-column-header,
affine-database-column-header { color: var(--n-text-2); }