/* Proposed blog foundations. Scoped to a blog root; no portfolio styles are changed. */

/* Light palette */
.blog-theme {
  color-scheme: light;
  --blog-canvas: #F4F3ED;
  --blog-surface: #FAF9F4;
  --blog-raised: #E8ECF1;
  --blog-text: #121821;
  --blog-secondary: #4D5968;
  --blog-muted: #4D5968;
  --blog-accent: #245AC2;
  --blog-accent-hover: #1D4FAF;
  --blog-accent-pressed: #183F8E;
  --blog-primary: #17202C;
  --blog-primary-hover: #263448;
  --blog-primary-pressed: #0B0D12;
  --blog-on-primary: #FAF9F4;
  --blog-visited: #4F4F9B;
  --blog-selected: #DEE8FA;
  --blog-control-edge: #737F90;
  --blog-focus: #245AC2;
  --blog-rule: #D6DCE4;
  --blog-selection: #DEE8FA;
  --blog-on-selection: #121821;
  --blog-success-text: #386147;
  --blog-success-bg: #E1EBD9;
  --blog-warning-text: #805315;
  --blog-warning-bg: #F0E1BB;
  --blog-error-text: #943E35;
  --blog-error-bg: #F1D9D1;
  --blog-info-text: #245AC2;
  --blog-info-bg: #DEE8FA;
  --blog-font-display: var(--font-instrument, "Instrument Serif"), Georgia, serif;
  --blog-font-reading: var(--font-inter, "Inter"), system-ui, sans-serif;
  --blog-font-code: ui-monospace, "SFMono-Regular", Consolas, monospace;
  --blog-title-size: clamp(2.5rem, 6vw, 4.5rem);
  --blog-title-leading: 1.05;
  --blog-journal-title-size: clamp(3.5rem, 5.5vw, 5.5rem);
  --blog-h2-size: 2rem;
  --blog-h2-leading: 1.25;
  --blog-h3-size: 1.5rem;
  --blog-h3-leading: 1.33;
  --blog-body-size: 1.25rem;
  --blog-body-leading: 1.7;
  --blog-deck-size: 1.5rem;
  --blog-deck-leading: 1.5;
  --blog-meta-size: 0.875rem;
  --blog-meta-leading: 1.5;
  --blog-code-size: 0.9375rem;
  --blog-code-leading: 1.65;
  --blog-space-1: 4px;
  --blog-space-2: 8px;
  --blog-space-3: 12px;
  --blog-space-4: 16px;
  --blog-space-5: 24px;
  --blog-space-6: 32px;
  --blog-space-7: 48px;
  --blog-space-8: 64px;
  --blog-space-9: 96px;
  --blog-space-10: 128px;
  --blog-gutter: 48px;
  --blog-section-gap: 64px;
  --blog-radius-small: 4px;
  --blog-radius-control: 10px;
  --blog-radius-input: 12px;
  --blog-radius-panel: 16px;
  --blog-radius-pill: 999px;
  --blog-prose-width: 43rem;
  --blog-page-width: 80rem;
  --blog-index-width: 11.5rem;
  --blog-column-gap: 3rem;
  --blog-header-height: 4rem;
  --blog-contents-height: 0px;
  --blog-anchor-offset: 6rem;
  --blog-target-min: 44px;
  --blog-focus-width: 3px;
  --blog-focus-gap: 3px;
  --blog-duration-fast: 140ms;
  --blog-duration-base: 200ms;
  --blog-duration-scene: 320ms;
  --blog-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --blog-enter-distance: 8px;
  --blog-popover-shadow: 0 12px 40px rgb(18 24 33 / 0.12);
}

/* Dark palette */
.blog-theme[data-blog-theme="dark"] {
  color-scheme: dark;
  --blog-canvas: #0B0D12;
  --blog-surface: #131720;
  --blog-raised: #1C2230;
  --blog-text: #EAEFF5;
  --blog-secondary: #AAB4C3;
  --blog-muted: #AAB4C3;
  --blog-accent: #95B7FF;
  --blog-accent-hover: #B0CAFF;
  --blog-accent-pressed: #86A7ED;
  --blog-primary: #EAEFF5;
  --blog-primary-hover: #D1DCEB;
  --blog-primary-pressed: #B5C3D6;
  --blog-on-primary: #0B0D12;
  --blog-visited: #B3ADFF;
  --blog-selected: #1E3150;
  --blog-control-edge: #64758F;
  --blog-focus: #95B7FF;
  --blog-rule: #2A3443;
  --blog-selection: #1E3150;
  --blog-on-selection: #EAEFF5;
  --blog-success-text: #BDD3AE;
  --blog-success-bg: #2D3C2C;
  --blog-warning-text: #E5C680;
  --blog-warning-bg: #46371E;
  --blog-error-text: #EDB0A4;
  --blog-error-bg: #482D2A;
  --blog-info-text: #95B7FF;
  --blog-info-bg: #1E3150;
  --blog-popover-shadow: 0 12px 40px rgb(0 0 0 / 0.32);
}

/* System is the default until the reader explicitly chooses Light or Dark. */
@media (prefers-color-scheme: dark) {
  .blog-theme:not([data-blog-theme="light"]):not([data-blog-theme="dark"]) {
    color-scheme: dark;
    --blog-canvas: #0B0D12;
    --blog-surface: #131720;
    --blog-raised: #1C2230;
    --blog-text: #EAEFF5;
    --blog-secondary: #AAB4C3;
    --blog-muted: #AAB4C3;
    --blog-accent: #95B7FF;
    --blog-accent-hover: #B0CAFF;
    --blog-accent-pressed: #86A7ED;
    --blog-primary: #EAEFF5;
    --blog-primary-hover: #D1DCEB;
    --blog-primary-pressed: #B5C3D6;
    --blog-on-primary: #0B0D12;
    --blog-visited: #B3ADFF;
    --blog-selected: #1E3150;
    --blog-control-edge: #64758F;
    --blog-focus: #95B7FF;
    --blog-rule: #2A3443;
    --blog-selection: #1E3150;
    --blog-on-selection: #EAEFF5;
    --blog-success-text: #BDD3AE;
    --blog-success-bg: #2D3C2C;
    --blog-warning-text: #E5C680;
    --blog-warning-bg: #46371E;
    --blog-error-text: #EDB0A4;
    --blog-error-bg: #482D2A;
    --blog-info-text: #95B7FF;
    --blog-info-bg: #1E3150;
    --blog-popover-shadow: 0 12px 40px rgb(0 0 0 / 0.32);
  }
}

@media (max-width: 1279px) {
  .blog-theme {
    --blog-gutter: 32px;
    --blog-contents-height: 48px;
    --blog-anchor-offset: 8.5rem;
  }
}

@media (max-width: 767px) {
  .blog-theme {
    --blog-gutter: 20px;
    --blog-title-size: clamp(2.5rem, 10vw, 3rem);
    --blog-title-leading: 1.1;
    --blog-h2-size: 1.625rem;
    --blog-h3-size: 1.375rem;
    --blog-body-size: 1.125rem;
    --blog-body-leading: 1.65;
    --blog-deck-size: 1.25rem;
    --blog-header-height: 3.5rem;
    --blog-section-gap: 48px;
    --blog-anchor-offset: 8rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .blog-theme {
    --blog-duration-fast: 0ms;
    --blog-duration-base: 0ms;
    --blog-duration-scene: 0ms;
    --blog-enter-distance: 0px;
  }
}