/* Color tokens — resolved at runtime via CSS variables */
@theme inline {
  --color-selection: var(--blok-selection);
  --color-selection-inline: var(--blok-selection-inline);
  --color-selection-highlight: var(--blok-selection-highlight);
  --color-bg-light: var(--blok-bg-light);
  --color-gray-text: var(--blok-gray-text);
  --color-dark: var(--blok-dark);
  --color-active-icon: var(--blok-active-icon);
  --color-link: var(--blok-link);
  --color-line-gray: var(--blok-line-gray);
  --color-tooltip-bg: var(--blok-tooltip-bg);
  --color-tooltip-font: var(--blok-tooltip-font);
  --color-icon-active-bg: var(--blok-icon-active-bg);
  --color-icon-active-text: var(--blok-icon-active-text);
  --color-text-primary: var(--blok-text-primary);
  --color-text-secondary: var(--blok-text-secondary);
  --color-popover-border: var(--blok-popover-border);
  --color-popover-shadow: var(--blok-popover-shadow);
  --color-popover-bg: var(--blok-popover-bg);
  --color-popover-border-icon: var(--blok-popover-border-icon);
  --color-popover-border-icon-disabled: var(--blok-popover-border-icon-disabled);
  --color-item-focus-bg: var(--blok-item-focus-bg);
  --color-item-focus-shadow: var(--blok-item-focus-shadow);
  --color-item-hover-bg: var(--blok-item-hover-bg);
  --color-icon-bg: var(--blok-icon-bg);
  --color-item-confirm-bg: var(--blok-item-confirm-bg);
  --color-item-confirm-hover-bg: var(--blok-item-confirm-hover-bg);
  --color-item-destructive-text: var(--blok-item-destructive-text);
  --color-item-destructive-hover-bg: var(--blok-item-destructive-hover-bg);
  --color-notify-success-bg: var(--blok-notify-success-bg);
  --color-notify-success-bar: var(--blok-notify-success-bar);
  --color-notify-error-bg: var(--blok-notify-error-bg);
  --color-notify-error-bar: var(--blok-notify-error-bar);
  --color-notify-btn-cancel-bg: var(--blok-notify-btn-cancel-bg);
  --color-notify-btn-cancel-text: var(--blok-notify-btn-cancel-text);
  --color-notify-btn-confirm-bg: var(--blok-notify-btn-confirm-bg);

  /* New tokens for hardcoded TS colors */
  --color-mobile-border: var(--blok-mobile-border);
  --color-search-input-bg: var(--blok-search-input-bg);
  --color-search-input-border: var(--blok-search-input-border);
  --color-search-input-focus-border: var(--blok-search-input-focus-border);
  --color-search-input-placeholder: var(--blok-search-input-placeholder);
  /* Empty-block placeholder text (::before). The --blok-placeholder-color
     hook is deliberately NOT declared in the palette: a palette declaration
     lands on the wrapper element itself, and custom-property inheritance
     resolves from the nearest ancestor — it would shadow a host's value set
     on any container above the editor. Dangling with a fallback keeps the
     hook overridable from anywhere (and tracks --blok-gray-text so dark
     themes inherit it). */
  --color-block-placeholder: var(--blok-placeholder-color, var(--blok-gray-text));
  --color-link-input-border: var(--blok-link-input-border);
  --color-popover-icon-bg: var(--blok-popover-icon-bg);
  --color-popover-icon-active-bg: var(--blok-popover-icon-active-bg);

  /* Color picker swatch ring */
  --color-swatch-ring-hover: var(--blok-swatch-ring-hover);
  --color-swatch-ring-active: var(--blok-swatch-ring-active);

  /* Surface tokens (code blocks, secondary containers) */
  --color-bg-secondary: var(--blok-bg-secondary);
  --color-border-secondary: var(--blok-border-secondary);

}

@layer utilities {
  .max-w-blok-content {
    /* Host-overridable content column cap, no width='full' needed. */
    max-width: var(--blok-content-max-width, var(--max-width-content));
  }
}

/* ─── Light theme (default) ─────────────────────────── */
/* Blok's palette declarations are zero-specificity on purpose — a host's plain
   [data-blok-interface] { --blok-*: … } rule (0,1,0) overrides Blok's light AND
   dark declarations in any stylesheet order, so hosts never need doubled
   selectors. Blok-internal light→dark ordering resolves by source order. */
:where([data-blok-interface]),
:where([data-blok-popover]),
:where([data-blok-top-layer]) {
  --blok-selection: #e1f2ff;
  --blok-selection-inline: #d4ecff;
  --blok-selection-highlight: rgba(46, 170, 220, 0.2);
  --blok-bg-light: #eff2f5;
  /*
    Secondary text grey. The previous #707684 measured 4.55:1 on white — it
    cleared AA by 0.05 and therefore failed on every tinted light surface Blok
    paints it on: 4.28:1 on --blok-bg-secondary (#f7f8fa, code language label)
    and 3.95:1 under the 8% --blok-item-hover-bg tint (bookmark description on
    hover). #646a79 measures 5.41 / 5.09 / 4.70 on those three. The dark-theme
    #a39e98 below already clears 5.7:1 everywhere and is unchanged.
  */
  --blok-gray-text: #646a79;
  --blok-dark: #1d202b;
  --blok-active-icon: #2383e2;
  /* Link text needs 4.5:1 on white; --blok-active-icon uses the 3:1 icon bar. */
  --blok-link: #1b6fc2;
  --blok-line-gray: #eff0f1;
  --blok-tooltip-bg: #1d202b;
  --blok-tooltip-font: #cdd1e0;
  --blok-icon-active-bg: rgba(35, 131, 226, 0.14);
  /* Selected labels need 4.5:1 on the tint and a color distinct from focused labels. */
  --blok-icon-active-text: #155fa8;
  --blok-text-primary: black;
  /* Tracks --blok-gray-text; see the contrast note there. */
  --blok-text-secondary: #646a79;
  --blok-popover-border: rgba(55, 53, 47, 0.09);
  --blok-popover-shadow: rgba(13, 20, 33, 0.1);
  --blok-popover-bg: #ffffff;
  --blok-popover-box-shadow: 0 0 0 1px rgba(55, 53, 47, 0.08), 0 4px 8px -2px rgba(55, 53, 47, 0.06), 0 12px 32px -8px rgba(55, 53, 47, 0.16);
  --blok-popover-border-icon: rgb(201 201 204 / 48%);
  --blok-popover-border-icon-disabled: #eff0f1;
  --blok-item-focus-bg: rgba(35, 131, 226, 0.14);
  --blok-item-focus-shadow: rgba(35, 131, 226, 0.14);
  --blok-item-hover-bg: rgba(55, 53, 47, 0.08);
  --blok-icon-bg: rgba(0, 0, 0, 0.04);
  --blok-item-confirm-bg: #c93636;
  --blok-item-confirm-hover-bg: #b92f2f;
  --blok-item-destructive-text: #c93636;
  --blok-item-destructive-hover-bg: rgba(201, 54, 54, 0.08);
  --blok-notify-success-bg: #fafffe;
  --blok-notify-success-bar: #41ffb1;
  --blok-notify-error-bg: #fffbfb;
  --blok-notify-error-bar: #fb5d5d;
  --blok-notify-btn-cancel-bg: #f2f5f7;
  --blok-notify-btn-cancel-text: #656b7c;
  --blok-notify-btn-confirm-bg: #34c992;

  /* Tokens extracted from TS files */
  --blok-mobile-border: #e8e8eb;
  --blok-search-input-bg: #fafafa;
  --blok-search-input-border: rgba(226, 226, 229, 0.2);
  --blok-search-input-focus-border: rgba(35, 131, 226, 0.5);
  /* Tracks the cascaded --blok-gray-text, so dark themes inherit it. */
  --blok-search-input-placeholder: var(--blok-gray-text);
  --blok-link-input-border: rgba(226, 226, 229, 0.2);

  /* Popover icon container */
  --blok-popover-icon-bg: rgba(55, 53, 47, 0.04);
  --blok-popover-icon-active-bg: rgba(35, 131, 226, 0.1);

  /* Table */
  --blok-table-border: #d1d5db;
  --blok-table-heading-bg: #f9fafb;
  --blok-table-grip-outline: transparent;
  --blok-table-drag-source-bg: #f3f4f6;

  /* Database / Kanban */
  --blok-database-card-bg: #ffffff;
  --blok-database-card-bg-hover: #f7f7f5;
  --blok-database-card-shadow: rgba(25, 25, 25, 0.027) 0 4px 12px 0, rgba(25, 25, 25, 0.02) 0 1px 2px 0, rgba(42, 28, 0, 0.07) 0 0 0 1px;
  --blok-database-card-shadow-hover: rgba(25, 25, 25, 0.06) 0 4px 12px 0, rgba(25, 25, 25, 0.04) 0 1px 2px 0, rgba(42, 28, 0, 0.1) 0 0 0 1px;
  --blok-database-card-border: rgba(0, 0, 0, 0.06);
  --blok-database-card-border-active: rgba(35, 131, 226, 0.57);
  --blok-database-card-placeholder: rgba(55, 53, 47, 0.4);
  --blok-database-card-colored-overlay: var(--blok-database-card-bg);
  --blok-database-card-colored-overlay-hover: var(--blok-database-card-bg-hover);
  --blok-database-card-colored-border: var(--blok-database-card-border);
  --blok-database-column-bg: rgba(0, 0, 0, 0.04);
  --blok-database-add-text: #646a79;
  --blok-database-add-border: rgba(55, 53, 47, 0.25);
  --blok-database-add-hover-bg: rgba(55, 53, 47, 0.06);
  --blok-database-delete-text: rgba(55, 53, 47, 0.35);
  --blok-database-delete-hover-text: rgba(55, 53, 47, 0.65);
  --blok-database-drawer-border: #e8e8eb;
  --blok-database-tab-bg: transparent;
  --blok-database-tab-bg-active: rgba(0, 0, 0, 0.06);
  --blok-database-tab-bg-hover: rgba(0, 0, 0, 0.04);
  --blok-database-tab-text: rgba(55, 53, 47, 0.7);
  --blok-database-tab-text-active: #37352f;
  --blok-database-popover-bg: #fff;
  --blok-database-popover-shadow: 0 4px 24px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.04);
  --blok-database-popover-hover: rgba(0, 0, 0, 0.04);

  /* Toggle switch */
  --blok-toggle-off-bg: #d4d4d8;
  --blok-toggle-on-bg: #2383e2;
  --blok-toggle-thumb-on-bg: #ffffff;

  /* Checklist */
  --blok-checklist-border: rgba(0, 0, 0, 0.28);
  --blok-checklist-shadow: rgba(0, 0, 0, 0.08);
  --blok-checklist-hover-ring: rgba(35, 131, 226, 0.14);
  --blok-checklist-readonly-fill: #94a3b8;

  /* Color picker swatch */
  --blok-swatch-neutral-bg: #f7f7f5;
  --blok-swatch-ring-hover: rgba(0, 0, 0, 0.1);
  --blok-swatch-ring-active: rgba(0, 0, 0, 0.3);

  /* Surface tokens (code blocks, secondary containers) */
  --blok-bg-secondary: #f7f8fa;
  --blok-border-secondary: rgba(55, 53, 47, 0.09);

  /* Generic surface / text / accent tokens (image tool + reusable). */
  --blok-bg-primary: #ffffff;
  --blok-bg-hover: rgba(15, 15, 14, 0.04);
  --blok-border-subtle: #eceae6;
  --blok-border-primary: #e0ddd6;
  --blok-border-strong: #c9c5bc;
  --blok-text-tertiary: #a3a39e;
  --blok-color-accent: #2383e2;
  --blok-color-danger: #e24a4a;

  /* File tool — Notion-style neutral chrome: the icon tile + download
     affordance read in greys, and the upload progress fill carries the blue
     accent (--blok-color-accent). The previewable-type icon glyphs pick up a
     per-category accent below (theme-independent — the tinted tile is built
     with color-mix against --blok-bg-secondary, so one value reads on both
     light and dark surfaces). */
  --blok-file-icon-pdf: #d93025;
  --blok-file-icon-document: #2563eb;
  --blok-file-icon-spreadsheet: #16a34a;
  --blok-file-icon-presentation: #ea580c;
  --blok-file-icon-archive: #ca8a04;
  --blok-file-icon-audio: #db2777;
  --blok-file-icon-video: #7c3aed;
  --blok-file-icon-image: #0891b2;
  --blok-file-icon-code: #4f46e5;

  /* Scroll-haze gradient color. JS sets this inline per preview surface to that
     surface's own background so the haze melts into it; declared here as the
     page background so the var resolves even before/without the inline set. */
  --blok-haze-color: var(--blok-bg-primary);

  /* Overlay chrome that sits ON the image pixels (lightbox backdrop, loading
     shimmer, resize-handle ring) stays dark regardless of page theme. */
  --blok-overlay-dark: rgba(25, 25, 24, 0.92);
  --blok-overlay-shimmer: rgba(255, 255, 255, 0.5);
  --blok-overlay-handle-ring: rgba(255, 255, 255, 0.9);

  /* Floating media toolbar chrome (image + embed). Theme-aware: light surface
     with dark glyphs in light theme; dark blocks below override to the inverse. */
  --blok-overlay-surface: #ffffff;
  --blok-overlay-ring: rgba(15, 15, 14, 0.08);
  --blok-overlay-fg: rgba(15, 15, 14, 0.62);
  --blok-overlay-fg-strong: #1d1d1d;
  --blok-overlay-fg-hover: rgba(15, 15, 14, 0.06);
  --blok-overlay-fg-pressed: rgba(15, 15, 14, 0.1);
  --blok-overlay-divider: rgba(15, 15, 14, 0.1);
  --blok-overlay-danger-bg: rgba(226, 74, 74, 0.12);
  --blok-overlay-danger-fg: #e24a4a;

  /* Image-tool composite shadow tokens. */
  --blok-image-shadow-resting: 0 8px 24px -10px rgba(15, 15, 14, 0.25), 0 0 0 1px rgba(15, 15, 14, 0.04);
  --blok-image-shadow-toolbar: 0 8px 20px rgba(0, 0, 0, 0.25);
  --blok-image-shadow-popover: 0 20px 40px -12px rgba(15, 15, 14, 0.22), 0 0 0 1px rgba(15, 15, 14, 0.06);

  /* Marker colors — light theme */
  --blok-color-gray-text: #787774;
  --blok-color-gray-bg: #f1f1ef;
  --blok-color-brown-text: #9f6b53;
  --blok-color-brown-bg: #f4eeee;
  --blok-color-orange-text: #d9730d;
  --blok-color-orange-bg: #fbecdd;
  --blok-color-yellow-text: #cb9b00;
  --blok-color-yellow-bg: #fbf3db;
  --blok-color-green-text: #448361;
  --blok-color-green-bg: #edf3ec;
  --blok-color-teal-text: #2b9a8f;
  --blok-color-teal-bg: #e4f5f3;
  --blok-color-blue-text: #337ea9;
  --blok-color-blue-bg: #e7f3f8;
  --blok-color-purple-text: #9065b0;
  --blok-color-purple-bg: #f6f3f9;
  --blok-color-pink-text: #c14c8a;
  --blok-color-pink-bg: #f9f0f5;
  --blok-color-red-text: #d44c47;
  --blok-color-red-bg: #fdebec;
  --blok-inline-code-bg: rgba(135, 131, 120, 0.15);
  /*
    Inline code needs its OWN red, not --blok-color-red-text: that token is the
    Marker tool's palette value (persisted into saved documents as
    `color: #d44c47`, pinned by the table clipboard tests) and it measures only
    3.62:1 against --blok-inline-code-bg. #b93a35 measures 4.80:1 on the same
    chip while staying the same hue.
  */
  --blok-inline-code-text: #b93a35;

  /*
    Table UI chrome — grip handles and add-row/col pills. The light theme
    uses Tailwind utility classes directly on the elements (see table.ts);
    these vars only have to exist for the dark overrides to reference them.
  */
  --blok-table-grip-bg: transparent;
  --blok-table-grip-hover-bg: transparent;
  --blok-table-grip-dot: currentColor;
  --blok-table-add-pill-bg: transparent;
  --blok-table-add-pill-bg-hover: transparent;
  --blok-table-add-pill-icon: currentColor;

  /* Foreground used on tinted dark surfaces (card hover, database actions). */
  --blok-text-on-dark: #ffffff;

  /* Dark translucent background used behind database card actions. */
  --blok-database-card-actions-bg: #1e2533;

  /* Small UI surfaces that can't reach a var via Tailwind arbitrary syntax. */
  --blok-button-focus-bg-hover: #fbfcfe;
  --blok-dnd-drop-indicator-bg: #d4e3fc;
  /* Grayish lead-in that runs from the editor's left edge to where the blue
     list drop line starts, so an indented line reads as a full-width rule. */
  --blok-dnd-drop-indicator-lead-bg: #dcdcda;
  /* Drop-line geometry. The horizontal (top/bottom) rule spans the content
     width, so 6px reads as a thin line; the vertical (left/right) bar is short,
     so it gets a slimmer width to read the same. */
  --blok-dnd-drop-indicator-thickness: 6px;
  --blok-dnd-drop-indicator-thickness-vertical: 5px;

  /* Direct-usage surface tokens extracted in B1.6. Light-theme values match
     the dark overrides below; they are rarely applied outside the dark theme. */
  --blok-table-add-pill-border: rgba(55, 53, 47, 0.17);
  --blok-database-card-menu-hover-bg: rgba(0, 0, 0, 0.04);
  --blok-database-column-pill-text: rgba(55, 53, 47, 0.9);
  --blok-database-card-actions-icon: rgba(55, 53, 47, 0.55);
  --blok-database-card-actions-divider: rgba(55, 53, 47, 0.15);

  /* Border widths + radii — shared structural tokens. */
  --blok-border-width-hairline: 1px;
  --blok-border-width-2: 2px;
  --blok-radius-xs: 0.25rem;
  --blok-radius-sm: 3px;
  --blok-radius-md: 6px;
  --blok-radius-lg: 12px;
  --blok-radius-xl: 16px;
  --blok-radius-pill: 999px;

  /* Image resize-handle surface colors (Notion-style dark pill + white rim). */
  --blok-handle-bg-default: rgba(15, 15, 15, 0.6);
  --blok-handle-bg-hover: rgba(15, 15, 15, 0.85);
  --blok-handle-bg-active: rgba(15, 15, 15, 1);
  --blok-handle-fg-default: rgba(255, 255, 255, 0.85);

  /* Spacing scale — 4px base, aligned with Tailwind's default spacing scale. */
  --blok-space-0: 0;
  --blok-space-0-25: 1px;
  --blok-space-0-5: 2px;
  --blok-space-0-75: 3px;
  --blok-space-1: 4px;
  --blok-space-1-25: 5px;
  --blok-space-1-5: 6px;
  --blok-space-1-75: 7px;
  --blok-space-2: 8px;
  --blok-space-2-25: 9px;
  --blok-space-2-5: 10px;
  --blok-space-2-75: 11px;
  --blok-space-3: 12px;
  --blok-space-3-25: 13px;
  --blok-space-3-5: 14px;
  --blok-space-4: 16px;
  --blok-space-4-5: 18px;
  --blok-space-5: 20px;
  --blok-space-6: 24px;
  --blok-space-10: 40px;

  /* Micro radii for the crop-editor handle notches. */
  --blok-radius-hairline: 1.5px;
  --blok-radius-none: 0;

  /* Icon sizing (non-scale, role-based). */
  --blok-size-icon-sm: 18px;
  --blok-size-icon-md: 22px;
  --blok-size-icon-lg: 26px;
  --blok-size-icon-xl: 32px;

  /* Shadow tokens — direct-usage surfaces (drawer, tab ghost). */
  --blok-shadow-drawer-side: -4px 0 12px rgba(0, 0, 0, 0.08);
  --blok-shadow-tab-ghost: 0 4px 12px rgba(0, 0, 0, 0.15);

  /*
    Z-index ladder — semantic layer names. Declared consumer-themeable even
    when only a subset is used by main.css today; Tailwind z-* utilities
    applied elsewhere can migrate to these later without conflict.
  */
  --blok-z-relative: 1;
  --blok-z-selection: 10;
  --blok-z-toolbar: 20;
  --blok-z-inline-toolbar: 30;
  --blok-z-popover: 2147483000;
  --blok-z-tooltip: 100;
  --blok-z-drawer: 1000;

  /* Motion tokens — durations and easings. */
  --blok-duration-fast: 80ms;
  --blok-duration-base: 120ms;
  --blok-duration-standard: 150ms;
  --blok-duration-slow: 200ms;
  --blok-duration-popover-enter: 180ms;
  --blok-duration-fade: 300ms;
  --blok-duration-notify-enter: 400ms;
  --blok-duration-notify-exit: 250ms;
  --blok-duration-bounce: 750ms;
  --blok-duration-rotation: 1200ms;
  --blok-duration-flash: 700ms;
  --blok-duration-checkbox-pop: 280ms;

  --blok-ease-standard: ease;
  --blok-ease-popover: cubic-bezier(0.16, 1, 0.3, 1);
  --blok-ease-spring: cubic-bezier(0.25, 0.1, 0.25, 1);
  --blok-ease-bounce: cubic-bezier(0.215, 0.61, 0.355, 1);
  --blok-ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --blok-ease-exit-out: ease-out;

  /* Typography tokens. */
  --blok-font-size-body: 14px;
  --blok-font-size-ui-label: 13px;
  --blok-font-size-ui-compact: 12px;
  --blok-font-size-ui-small: 11px;

  --blok-font-weight-regular: 400;
  --blok-font-weight-medium: 500;
  --blok-font-weight-semibold: 600;

  --blok-line-height-tight: 1;
  --blok-line-height-body: 1.45;
  --blok-line-height-option: 1.3;

  /*
    Generic accent hook consumed with a fallback by plugin-owned CSS
    (image lightbox, crop editor). Declared here so the var-resolution
    audit sees it as a valid token.
  */
  --blok-accent: var(--blok-color-accent);

  /*
    PUBLIC hook (docs-site Styles API): media skeleton/upload-placeholder
    surface; tracks --blok-bg-light. Pinned by
    host-customization-tokens.test.ts.
  */
  --blok-bg-tertiary: var(--blok-bg-light);

  /* Image lightbox chrome (dark, independent of page theme). */
  --blok-image-lightbox-backdrop: rgba(25, 25, 24, 0.92);
  --blok-image-lightbox-toolbar-bg: #252525;
  --blok-image-lightbox-toolbar-fg: #e2e0dc;
  --blok-image-lightbox-toolbar-ring: rgba(255, 255, 255, 0.14);
  --blok-image-lightbox-toolbar-shadow-main: rgba(0, 0, 0, 0.5);
  --blok-image-lightbox-toolbar-shadow-ambient: rgba(0, 0, 0, 0.4);
  --blok-image-lightbox-btn-hover-bg: rgba(255, 255, 255, 0.055);
  --blok-image-lightbox-btn-active-bg: rgba(255, 255, 255, 0.09);
  --blok-image-lightbox-divider-bg: rgba(255, 255, 255, 0.1);
  --blok-image-lightbox-caption-fg: #a39e98;
  --blok-image-lightbox-shortcut-fg: rgba(255, 255, 255, 0.45);

  /* Image empty-state embed submit (high-contrast fg on accent). */
  --blok-image-embed-submit-fg: #fff;

  /* Crop editor composite-shadow leaf literals. */
  --blok-crop-rect-drop-shadow: 0 8px 32px -8px rgba(0, 0, 0, 0.8);
  --blok-crop-handle-edge-drop-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
  --blok-crop-handle-edge-halo: 0 0 0 3px rgba(255, 255, 255, 0.18);
  --blok-crop-handle-edge-drop-hover: 0 2px 6px rgba(0, 0, 0, 0.3);
  --blok-crop-pill-fg: #fff;

  /* Crop-modal button shadow. */
  --blok-crop-modal-btn-shadow: rgba(0, 0, 0, 0.3);

  /* Image error-state radius (slightly larger than --blok-radius-md). */
  --blok-radius-md-plus: 8px;

  /* Video player custom controls — Notion-style minimal palette: white glyphs
     on a subtle dark scrim, neutral progress fill, no coral. */
  --blok-video-stage: #000000;
  --blok-video-accent: #ffffff;
  --blok-video-control-fg: #ffffff;
  --blok-video-control-bg-hover: rgba(255, 255, 255, 0.1);
  --blok-video-control-bg-active: rgba(255, 255, 255, 0.2);
  --blok-video-time-fg: rgba(255, 255, 255, 0.8);
  --blok-video-track: rgba(255, 255, 255, 0.2);
  --blok-video-buffered: rgba(255, 255, 255, 0.35);
  --blok-video-volume-track: rgba(0, 0, 0, 0.3);
  --blok-video-thumb: #ffffff;
  --blok-video-thumb-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  --blok-video-burst-bg: rgba(0, 0, 0, 0.5);
  --blok-video-burst-fg: #ffffff;
  --blok-video-burst-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.4);
  --blok-video-burst-ring: rgba(255, 255, 255, 0.4);
  /* Settings popover — near-opaque dark so video never bleeds through the text. */
  --blok-video-menu-bg: rgba(22, 22, 22, 0.94);
  --blok-video-menu-value-fg: rgba(255, 255, 255, 0.62);
  /* Frosted-glass edge + resting glyph tint + selected-row wash. */
  --blok-video-menu-border: rgba(255, 255, 255, 0.08);
  --blok-video-menu-icon: rgba(255, 255, 255, 0.9);
  --blok-video-menu-row-active: color-mix(in srgb, var(--blok-video-accent) 14%, transparent);
  --blok-video-theater-scrim: rgba(0, 0, 0, 0.8);
  --blok-video-theater-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.6);
  --blok-video-scrim-strong: rgba(0, 0, 0, 0.6);
  --blok-video-scrim-mid: rgba(0, 0, 0, 0.2);
  --blok-video-shadow-hover: 0 8px 24px -8px rgba(0, 0, 0, 0.18);
  --blok-video-focus-ring: color-mix(in srgb, var(--blok-video-accent) 30%, transparent);
}

/* ─── Dark theme — system preference ────────────────── */
@media (prefers-color-scheme: dark) {
  :where(:root:not([data-blok-theme="light"]) [data-blok-interface]),
  :where(:root:not([data-blok-theme="light"]) [data-blok-popover]),
  :where(:root:not([data-blok-theme="light"]) [data-blok-top-layer]) {
    --blok-selection: rgba(35, 131, 226, 0.2);
    --blok-selection-inline: rgba(35, 131, 226, 0.3);
    --blok-selection-highlight: rgba(35, 131, 226, 0.25);
    --blok-bg-light: rgba(255, 255, 255, 0.08);
    --blok-gray-text: #a39e98;
    --blok-dark: #191918;
    --blok-active-icon: #529cca;
    --blok-link: #529cca;
    --blok-line-gray: #37352f;
    --blok-tooltip-bg: #2e2e2d;
    --blok-tooltip-font: #e8e6e3;
    --blok-icon-active-bg: rgba(35, 131, 226, 0.2);
    --blok-icon-active-text: #6aaed8;
    --blok-text-primary: #e2e0dc;
    --blok-text-secondary: #a39e98;
    --blok-popover-border: rgba(255, 255, 255, 0.14);
    --blok-popover-shadow: rgba(0, 0, 0, 0.6);
    --blok-popover-bg: #252525;
    --blok-popover-box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12), 0 4px 8px -2px rgba(0, 0, 0, 0.3), 0 12px 32px -8px rgba(0, 0, 0, 0.5);
    --blok-popover-border-icon: #37352f;
    --blok-popover-border-icon-disabled: #2f2d29;
    --blok-item-focus-bg: rgba(35, 131, 226, 0.2);
    --blok-item-focus-shadow: rgba(35, 131, 226, 0.2);
    --blok-item-hover-bg: rgba(255, 255, 255, 0.055);
    --blok-icon-bg: rgba(255, 255, 255, 0.07);
    --blok-item-confirm-bg: #3d1f1f;
    --blok-item-confirm-hover-bg: #4a2020;
    --blok-item-destructive-text: #fb5d5d;
    --blok-item-destructive-hover-bg: rgba(251, 93, 93, 0.1);
    --blok-notify-success-bg: #1a2e22;
    --blok-notify-success-bar: #41ffb1;
    --blok-notify-error-bg: #2e1a1a;
    --blok-notify-error-bar: #fb5d5d;
    --blok-notify-btn-cancel-bg: #2f2d29;
    --blok-notify-btn-cancel-text: #a39e98;
    --blok-notify-btn-confirm-bg: #34c992;
    --blok-mobile-border: rgba(255, 255, 255, 0.07);
    --blok-search-input-bg: #363636;
    --blok-search-input-border: rgba(255, 255, 255, 0.2);
    --blok-search-input-focus-border: rgba(35, 131, 226, 0.5);
    --blok-link-input-border: #37352f;
    --blok-popover-icon-bg: rgba(255, 255, 255, 0.08);
    --blok-popover-icon-active-bg: rgba(35, 131, 226, 0.15);

    /* Table */
    --blok-table-border: #3e3e3d;
    --blok-table-heading-bg: #272725;
    --blok-table-grip-outline: rgba(255, 255, 255, 0.12);
    --blok-table-drag-source-bg: rgba(255, 255, 255, 0.07);

    /* Database / Kanban */
    --blok-database-card-bg: #2d2d2c;
    --blok-database-card-bg-hover: #353534;
    --blok-database-card-shadow: rgba(0, 0, 0, 0.4) 0 4px 12px 0, rgba(0, 0, 0, 0.3) 0 1px 2px 0, rgba(255, 255, 255, 0.06) 0 0 0 1px;
    --blok-database-card-shadow-hover: rgba(0, 0, 0, 0.5) 0 4px 12px 0, rgba(0, 0, 0, 0.4) 0 1px 2px 0, rgba(255, 255, 255, 0.09) 0 0 0 1px;
    --blok-database-card-border: rgba(255, 255, 255, 0.06);
    --blok-database-card-border-active: rgba(35, 131, 226, 0.7);
    --blok-database-card-placeholder: rgba(255, 255, 255, 0.3);
    --blok-database-card-colored-overlay: rgba(255, 255, 255, 0.06);
    --blok-database-card-colored-overlay-hover: rgba(255, 255, 255, 0.11);
    --blok-database-card-colored-border: rgba(255, 255, 255, 0.07);
    --blok-database-column-bg: rgba(255, 255, 255, 0.05);
    --blok-database-add-text: #a39e98;
    --blok-database-add-border: rgba(255, 255, 255, 0.2);
    --blok-database-add-hover-bg: rgba(255, 255, 255, 0.06);
    --blok-database-delete-text: rgba(255, 255, 255, 0.3);
    --blok-database-delete-hover-text: rgba(255, 255, 255, 0.55);
    --blok-database-drawer-border: rgba(255, 255, 255, 0.1);
    --blok-database-tab-bg: transparent;
    --blok-database-tab-bg-active: rgba(255, 255, 255, 0.08);
    --blok-database-tab-bg-hover: rgba(255, 255, 255, 0.04);
    --blok-database-tab-text: rgba(255, 255, 255, 0.6);
    --blok-database-tab-text-active: rgba(255, 255, 255, 0.9);
    --blok-database-popover-bg: #2d2d2c;
    --blok-database-popover-shadow: 0 4px 24px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.08);
    --blok-database-popover-hover: rgba(255, 255, 255, 0.06);

    /* Toggle switch */
    --blok-toggle-off-bg: #3f3f46;
    --blok-toggle-on-bg: #529cca;
    --blok-toggle-thumb-on-bg: #ffffff;

    /* Checklist */
    --blok-checklist-border: rgba(255, 255, 255, 0.22);
    --blok-checklist-shadow: rgba(0, 0, 0, 0.3);
    --blok-checklist-hover-ring: rgba(82, 156, 202, 0.2);
    --blok-checklist-readonly-fill: #475569;

    /* Color picker swatch */
    --blok-swatch-neutral-bg: #3a3a38;
    --blok-swatch-ring-hover: rgba(255, 255, 255, 0.15);
    --blok-swatch-ring-active: rgba(255, 255, 255, 0.35);

    /* Surface tokens (code blocks, secondary containers) */
    --blok-bg-secondary: rgba(255, 255, 255, 0.04);
    --blok-border-secondary: rgba(255, 255, 255, 0.08);

    /* Generic surface / text / accent tokens (image tool + reusable). */
    --blok-bg-primary: #1d1d1c;
    --blok-bg-hover: rgba(255, 255, 255, 0.04);
    --blok-border-subtle: #2a2a28;
    --blok-border-primary: #333331;
    --blok-border-strong: #474744;
    --blok-text-tertiary: #6e6e68;
    --blok-color-accent: #4c9fff;
    --blok-color-danger: #ff6b6b;

    /* File tool — Notion-style neutral chrome; progress fill uses the blue
       accent (--blok-color-accent). No standalone file accent token. */

    /* Image-tool — dark elevation + denser overlay chrome with hairline ring. */
    --blok-image-shadow-resting: 0 10px 28px -12px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.05);
    --blok-image-shadow-toolbar: 0 12px 28px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.35);
    --blok-image-shadow-popover: 0 24px 48px -12px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.06);
    --blok-overlay-dark: rgba(44, 44, 42, 0.92);
    --blok-overlay-surface: #2c2c2a;
    --blok-overlay-ring: rgba(255, 255, 255, 0.1);
    --blok-overlay-fg: rgba(255, 255, 255, 0.86);
    --blok-overlay-fg-strong: #ffffff;
    --blok-overlay-fg-hover: rgba(255, 255, 255, 0.14);
    --blok-overlay-fg-pressed: rgba(255, 255, 255, 0.24);
    --blok-overlay-divider: rgba(255, 255, 255, 0.14);
    --blok-overlay-danger-bg: rgba(255, 80, 80, 0.22);
    --blok-overlay-danger-fg: #ff8a8a;

    /* Marker colors — dark theme */
    --blok-color-gray-text: #9b9b9b;
    --blok-color-gray-bg: #2f2f2f;
    --blok-color-brown-text: #c59177;
    --blok-color-brown-bg: #452a1c;
    --blok-color-orange-text: #dc8c47;
    --blok-color-orange-bg: #4d2f14;
    --blok-color-yellow-text: #d4ab49;
    --blok-color-yellow-bg: #544012;
    --blok-color-green-text: #5db184;
    --blok-color-green-bg: #1e432f;
    --blok-color-teal-text: #5cbcb3;
    --blok-color-teal-bg: #1b4642;
    --blok-color-blue-text: #5c9fcc;
    --blok-color-blue-bg: #123a54;
    --blok-color-purple-text: #a67dca;
    --blok-color-purple-bg: #341d49;
    --blok-color-pink-text: #d45e99;
    --blok-color-pink-bg: #4b1b33;
    --blok-color-red-text: #dd5e5a;
    --blok-color-red-bg: #4e1a18;
    /* 5.63:1 on the editor body, 4.87:1 on the popover surface; the light
       theme's #b93a35 measures 1.5:1 there. */
    --blok-inline-code-text: #ea8480;

    --blok-table-grip-bg: #4a4a4a;
    --blok-table-grip-hover-bg: #555554;
    --blok-table-grip-dot: #ffffff;
    --blok-table-add-pill-bg: #2c2c2b;
    --blok-table-add-pill-bg-hover: #2e2e2d;
    --blok-table-add-pill-icon: #9e9e9d;

    --blok-text-on-dark: #ffffff;
    --blok-database-card-actions-bg: #0f1420;

    --blok-button-focus-bg-hover: #2d2d2c;
    --blok-dnd-drop-indicator-bg: #1f3a5c;
    --blok-dnd-drop-indicator-lead-bg: #3a3d42;

    --blok-table-add-pill-border: rgba(255, 255, 255, 0.17);
    --blok-database-card-menu-hover-bg: rgba(255, 255, 255, 0.12);
    --blok-database-column-pill-text: rgba(255, 255, 255, 0.9);
    --blok-database-card-actions-icon: rgba(255, 255, 255, 0.75);
    --blok-database-card-actions-divider: rgba(255, 255, 255, 0.4);
  }
}

/* ─── Dark theme — explicit override ────────────────── */
:where([data-blok-theme="dark"] [data-blok-interface]),
:where([data-blok-theme="dark"] [data-blok-popover]),
:where([data-blok-theme="dark"] [data-blok-top-layer]) {
  --blok-selection: rgba(35, 131, 226, 0.2);
  --blok-selection-inline: rgba(35, 131, 226, 0.3);
  --blok-selection-highlight: rgba(35, 131, 226, 0.25);
  --blok-bg-light: rgba(255, 255, 255, 0.08);
  --blok-gray-text: #a39e98;
  --blok-dark: #191918;
  --blok-active-icon: #529cca;
  --blok-link: #529cca;
  --blok-line-gray: #37352f;
  --blok-tooltip-bg: #2e2e2d;
  --blok-tooltip-font: #e8e6e3;
  --blok-icon-active-bg: rgba(35, 131, 226, 0.2);
  --blok-icon-active-text: #6aaed8;
  --blok-text-primary: #e2e0dc;
  --blok-text-secondary: #a39e98;
  --blok-popover-border: rgba(255, 255, 255, 0.14);
  --blok-popover-shadow: rgba(0, 0, 0, 0.6);
  --blok-popover-bg: #252525;
  --blok-popover-box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12), 0 4px 8px -2px rgba(0, 0, 0, 0.3), 0 12px 32px -8px rgba(0, 0, 0, 0.5);
  --blok-popover-border-icon: #37352f;
  --blok-popover-border-icon-disabled: #2f2d29;
  --blok-item-focus-bg: rgba(35, 131, 226, 0.2);
  --blok-item-focus-shadow: rgba(35, 131, 226, 0.2);
  --blok-item-hover-bg: rgba(255, 255, 255, 0.055);
  --blok-icon-bg: rgba(255, 255, 255, 0.07);
  --blok-item-confirm-bg: #3d1f1f;
  --blok-item-confirm-hover-bg: #4a2020;
  --blok-item-destructive-text: #fb5d5d;
  --blok-item-destructive-hover-bg: rgba(251, 93, 93, 0.1);
  --blok-notify-success-bg: #1a2e22;
  --blok-notify-success-bar: #41ffb1;
  --blok-notify-error-bg: #2e1a1a;
  --blok-notify-error-bar: #fb5d5d;
  --blok-notify-btn-cancel-bg: #2f2d29;
  --blok-notify-btn-cancel-text: #a39e98;
  --blok-notify-btn-confirm-bg: #34c992;
  --blok-mobile-border: rgba(255, 255, 255, 0.07);
  --blok-search-input-bg: #363636;
  --blok-search-input-border: rgba(255, 255, 255, 0.2);
  --blok-search-input-focus-border: rgba(35, 131, 226, 0.5);
  --blok-link-input-border: #37352f;
  --blok-popover-icon-bg: rgba(255, 255, 255, 0.08);
  --blok-popover-icon-active-bg: rgba(35, 131, 226, 0.15);

  /* Table */
  --blok-table-border: #3e3e3d;
  --blok-table-heading-bg: #272725;
  --blok-table-grip-outline: rgba(255, 255, 255, 0.12);
  --blok-table-drag-source-bg: rgba(255, 255, 255, 0.07);

  /* Database / Kanban */
  --blok-database-card-bg: #2d2d2c;
  --blok-database-card-bg-hover: #353534;
  --blok-database-card-shadow: rgba(0, 0, 0, 0.4) 0 4px 12px 0, rgba(0, 0, 0, 0.3) 0 1px 2px 0, rgba(255, 255, 255, 0.06) 0 0 0 1px;
  --blok-database-card-shadow-hover: rgba(0, 0, 0, 0.5) 0 4px 12px 0, rgba(0, 0, 0, 0.4) 0 1px 2px 0, rgba(255, 255, 255, 0.09) 0 0 0 1px;
  --blok-database-card-border: rgba(255, 255, 255, 0.06);
  --blok-database-card-border-active: rgba(35, 131, 226, 0.7);
  --blok-database-card-placeholder: rgba(255, 255, 255, 0.3);
  --blok-database-card-colored-overlay: rgba(255, 255, 255, 0.06);
  --blok-database-card-colored-overlay-hover: rgba(255, 255, 255, 0.11);
  --blok-database-card-colored-border: rgba(255, 255, 255, 0.07);
  --blok-database-column-bg: rgba(255, 255, 255, 0.03);
  --blok-database-add-text: #a39e98;
  --blok-database-add-border: rgba(255, 255, 255, 0.2);
  --blok-database-add-hover-bg: rgba(255, 255, 255, 0.06);
  --blok-database-delete-text: rgba(255, 255, 255, 0.3);
  --blok-database-delete-hover-text: rgba(255, 255, 255, 0.55);
  --blok-database-drawer-border: rgba(255, 255, 255, 0.1);
  --blok-database-tab-bg: transparent;
  --blok-database-tab-bg-active: rgba(255, 255, 255, 0.08);
  --blok-database-tab-bg-hover: rgba(255, 255, 255, 0.04);
  --blok-database-tab-text: rgba(255, 255, 255, 0.6);
  --blok-database-tab-text-active: rgba(255, 255, 255, 0.9);
  --blok-database-popover-bg: #2d2d2c;
  --blok-database-popover-shadow: 0 4px 24px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.08);
  --blok-database-popover-hover: rgba(255, 255, 255, 0.06);

  /* Toggle switch */
  --blok-toggle-off-bg: #3f3f46;
  --blok-toggle-on-bg: #e4e4e7;
  --blok-toggle-thumb-on-bg: #252525;

  /* Checklist */
  --blok-checklist-border: rgba(255, 255, 255, 0.22);
  --blok-checklist-shadow: rgba(0, 0, 0, 0.3);
  --blok-checklist-hover-ring: rgba(82, 156, 202, 0.2);
  --blok-checklist-readonly-fill: #475569;

  /* Color picker swatch */
  --blok-swatch-neutral-bg: #3a3a38;
  --blok-swatch-ring-hover: rgba(255, 255, 255, 0.15);
  --blok-swatch-ring-active: rgba(255, 255, 255, 0.35);

  /* Surface tokens (code blocks, secondary containers) */
  --blok-bg-secondary: rgba(255, 255, 255, 0.04);
  --blok-border-secondary: rgba(255, 255, 255, 0.08);

  /* Generic surface / text / accent tokens (image tool + reusable). */
  --blok-bg-primary: #1d1d1c;
  --blok-bg-hover: rgba(255, 255, 255, 0.04);
  --blok-border-subtle: #2a2a28;
  --blok-border-primary: #333331;
  --blok-border-strong: #474744;
  --blok-text-tertiary: #6e6e68;
  --blok-color-accent: #4c9fff;
  --blok-color-danger: #ff6b6b;

  /* File tool — Notion-style neutral chrome; progress fill uses the blue
     accent (--blok-color-accent). No standalone file accent token. */

  /* Image-tool — dark elevation + denser overlay chrome with hairline ring. */
  --blok-image-shadow-resting: 0 10px 28px -12px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.05);
  --blok-image-shadow-toolbar: 0 12px 28px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.35);
  --blok-image-shadow-popover: 0 24px 48px -12px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.06);
  --blok-overlay-dark: rgba(44, 44, 42, 0.92);
  --blok-overlay-surface: #2c2c2a;
  --blok-overlay-ring: rgba(255, 255, 255, 0.1);
  --blok-overlay-fg: rgba(255, 255, 255, 0.86);
  --blok-overlay-fg-strong: #ffffff;
  --blok-overlay-fg-hover: rgba(255, 255, 255, 0.14);
  --blok-overlay-fg-pressed: rgba(255, 255, 255, 0.24);
  --blok-overlay-divider: rgba(255, 255, 255, 0.14);
  --blok-overlay-danger-bg: rgba(255, 80, 80, 0.22);
  --blok-overlay-danger-fg: #ff8a8a;

  /* Marker colors — dark theme */
  --blok-color-gray-text: #9b9b9b;
  --blok-color-gray-bg: #2f2f2f;
  --blok-color-brown-text: #c59177;
  --blok-color-brown-bg: #452a1c;
  --blok-color-orange-text: #dc8c47;
  --blok-color-orange-bg: #4d2f14;
  --blok-color-yellow-text: #d4ab49;
  --blok-color-yellow-bg: #544012;
  --blok-color-green-text: #5db184;
  --blok-color-green-bg: #1e432f;
  --blok-color-teal-text: #5cbcb3;
  --blok-color-teal-bg: #1b4642;
  --blok-color-blue-text: #5c9fcc;
  --blok-color-blue-bg: #123a54;
  --blok-color-purple-text: #a67dca;
  --blok-color-purple-bg: #341d49;
  --blok-color-pink-text: #d45e99;
  --blok-color-pink-bg: #4b1b33;
  --blok-color-red-text: #dd5e5a;
  --blok-color-red-bg: #4e1a18;
  /* 5.63:1 on the editor body, 4.87:1 on the popover surface; the light
     theme's #b93a35 measures 1.5:1 there. */
  --blok-inline-code-text: #ea8480;

  --blok-table-grip-bg: #4a4a4a;
  --blok-table-grip-hover-bg: #555554;
  --blok-table-grip-dot: #ffffff;
  --blok-table-add-pill-bg: #2c2c2b;
  --blok-table-add-pill-bg-hover: #2e2e2d;
  --blok-table-add-pill-icon: #9e9e9d;

  --blok-text-on-dark: #ffffff;
  --blok-database-card-actions-bg: #0f1420;

  --blok-button-focus-bg-hover: #2d2d2c;
  --blok-dnd-drop-indicator-bg: #1f3a5c;
  --blok-dnd-drop-indicator-lead-bg: #3a3d42;

  --blok-table-add-pill-border: rgba(255, 255, 255, 0.17);
  --blok-database-card-menu-hover-bg: rgba(255, 255, 255, 0.12);
  --blok-database-column-pill-text: rgba(255, 255, 255, 0.9);
  --blok-database-card-actions-icon: rgba(255, 255, 255, 0.75);
  --blok-database-card-actions-divider: rgba(255, 255, 255, 0.4);
}

/* ─── Native selection opt-out ──────────────────────── */
/*
 * config.style.nativeSelection stamps data-blok-native-selection on the
 * editor wrapper (UI.make). preflight.css skips its ::selection repaint for
 * such editors; this block keeps the fake-background highlight — which reads
 * the SAME --blok-selection-inline token via inline style (see
 * selection/fake-background/shadows.ts) — consistent by re-pointing the token
 * at the UA's native Highlight system color.
 *
 * MUST stay after BOTH dark-theme palette blocks above: every palette block
 * is zero-specificity on purpose (see the light-theme comment), so
 * Blok-internal resolution is by source order — declared any earlier, the
 * dark palettes would win in dark mode and paint the fake-background
 * highlight Blok-blue under the opt-out.
 */
:where([data-blok-native-selection]) {
  --blok-selection-inline: Highlight;
}