/* ================================================================
   Dual Design System – Token Layer
   Light theme: Claude (warm parchment, terracotta, ring shadows)
   Dark theme:  Binance (deep black, yellow, flat surfaces)
   ================================================================ */

/* ── 1. Base Tokens — Claude defaults (light mode) ── */

:root {
    /* ── Colors · Brand & Accent (Claude) ── */
    --bn-primary:           #c96442;
    --bn-primary-rgb:       201, 100, 66;
    --bn-primary-active:    #d97757;
    --bn-primary-active-rgb: 217, 119, 87;
    --bn-primary-disabled:  #e8e6dc;
    --bn-accent-turquoise:  #2dbdb6;

    /* ── Colors · Surface & Background (Claude) ── */
    --bn-canvas-light:        #f5f4ed;
    --bn-canvas-dark:         #141413;
    --bn-surface-card-dark:   #30302e;
    --bn-surface-elevated-dark: #3d3d3a;
    --bn-surface-soft-light:  #faf9f5;
    --bn-surface-strong-light:#e8e6dc;

    /* ── Colors · Text (Claude) ── */
    --bn-ink:               #141413;
    --bn-body:              #b0aea5;
    --bn-body-on-light:     #141413;
    --bn-muted:             #5e5d59;
    --bn-muted-strong:      #87867f;
    --bn-on-primary:        #faf9f5;
    --bn-on-dark:           #faf9f5;

    /* ── Colors · Borders & Hairlines (Claude) ── */
    --bn-hairline-on-light: #f0eee6;
    --bn-hairline-on-dark:  #30302e;
    --bn-border-strong:     #d1cfc5;

    /* ── Colors · Semantic (shared) ── */
    --bn-trading-up:        #0ecb81;
    --bn-trading-down:      #f6465d;

    /* ── Colors · Info / Focus ── */
    --bn-info:              #3898ec;
    --bn-info-ring:         #3898ec;

    /* ── Typography ──
       Sans (default for global) — keeps every other site heading on Inter.
       Serif stack is opt-in via .course-page light mode below.
    */
    --bn-font-serif:    'Source Han Serif SC', 'Noto Serif SC', 'Songti SC', 'STSong', Georgia, 'Times New Roman', serif;
    --bn-font-display:  Inter, -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', system-ui, sans-serif;
    --bn-font-body:     Inter, -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', system-ui, sans-serif;
    --bn-font-number:   'IBM Plex Sans', Inter, -apple-system, BlinkMacSystemFont, sans-serif;

    /* ── Font Sizes (preserve global; course pages override below) ── */
    --bn-fs-hero:       64px;
    --bn-fs-display-lg: 48px;
    --bn-fs-display-md: 40px;
    --bn-fs-display-sm: 32px;
    --bn-fs-title-lg:   24px;
    --bn-fs-title-md:   20px;
    --bn-fs-title-sm:   16px;
    --bn-fs-num-display:40px;
    --bn-fs-num-md:     16px;
    --bn-fs-num-sm:     14px;
    --bn-fs-body-lg:    17px;
    --bn-fs-body-md:    14px;
    --bn-fs-body-sm:    13px;
    --bn-fs-caption:    12px;
    --bn-fs-button:     14px;
    --bn-fs-nav:        14px;

    /* ── Font Weights (shared) ── */
    --bn-fw-bold:       700;
    --bn-fw-semibold:   600;
    --bn-fw-medium:     500;
    --bn-fw-regular:    400;

    /* ── Line Heights (shared) ── */
    --bn-lh-tight:      1.1;
    --bn-lh-snug:       1.15;
    --bn-lh-heading:    1.2;
    --bn-lh-title:      1.3;
    --bn-lh-title-md:   1.35;
    --bn-lh-body:       1.5;
    --bn-lh-caption:    1.4;
    --bn-lh-button:     1;

    /* ── Spacing (shared, 4px base) ── */
    --bn-space-xxs:     4px;
    --bn-space-xs:      8px;
    --bn-space-sm:      12px;
    --bn-space-md:      16px;
    --bn-space-lg:      24px;
    --bn-space-xl:      32px;
    --bn-space-xxl:     48px;
    --bn-space-3xl:     64px;
    --bn-space-section: 80px;
    --bn-space-section-mobile: 56px;

    /* ── Border Radius (shared) ── */
    --bn-radius-xs:     2px;
    --bn-radius-sm:     4px;
    --bn-radius-md:     6px;
    --bn-radius-lg:     8px;
    --bn-radius-xl:     12px;
    --bn-radius-pill:   9999px;
    --bn-radius-full:   9999px;

    /* ── Shadows (Claude — ring-based) ── */
    --bn-shadow-focus:   0px 0px 0px 1px #d1cfc5;
    --bn-shadow-subtle:  rgba(0,0,0,0.05) 0px 4px 24px;
    --bn-shadow-ring:    0 0 0 1px var(--bn-hairline-on-light);
    --bn-shadow-ring-strong: 0 0 0 1px var(--bn-border-strong);
    --bn-shadow-card:    0 0 0 1px var(--bn-hairline-on-light), 0 1px 2px rgba(20,20,19,0.04);
    --bn-shadow-card-hover: 0 0 0 1px var(--bn-border-strong), 0 12px 32px -8px rgba(20,20,19,0.12);
    --bn-shadow-elevated: 0 0 0 1px var(--bn-hairline-on-light), 0 24px 48px -16px rgba(20,20,19,0.16);

    /* ── Breakpoints (Wave 7.4.1) ──
     * Single source of truth for media-query thresholds. Use in component
     * CSS via min-width / max-width queries; the tokens themselves are
     * documentation (CSS doesn't accept CSS-vars inside @media). The
     * tier names follow Binance/Apple style:
     *   - tablet-portrait: 768  (iPad portrait)
     *   - tablet-landscape:1024 (iPad Pro portrait, iPad landscape)
     *   - desktop:         1280 (small laptop)
     *   - desktop-wide:    1536 (1080p desktop+)
     *
     * Authoring conventions (enforced by Wave 7.4.2 audits):
     *   @media (max-width: 767.98px)                              { ... } // mobile
     *   @media (min-width: 768px) and (max-width: 1023.98px)      { ... } // tablet-portrait
     *   @media (min-width: 1024px) and (max-width: 1279.98px)     { ... } // tablet-landscape
     *   @media (min-width: 1280px) and (max-width: 1535.98px)     { ... } // desktop
     *   @media (min-width: 1536px)                                { ... } // desktop-wide
     */
    --bn-bp-tablet-portrait:  768px;
    --bn-bp-tablet-landscape: 1024px;
    --bn-bp-desktop:          1280px;
    --bn-bp-desktop-wide:     1536px;
}


/* ── 2. Dark-mode token overrides → Binance ── */

[data-bs-theme="dark"] {
    --bn-primary:           #fcd535;
    --bn-primary-rgb:       252, 213, 53;
    --bn-primary-active:    #f0b90b;
    --bn-primary-active-rgb: 240, 185, 11;
    --bn-primary-disabled:  #3a3a1f;

    --bn-canvas-light:        #ffffff;
    --bn-canvas-dark:         #0b0e11;
    --bn-surface-card-dark:   #1e2329;
    --bn-surface-elevated-dark: #2b3139;
    --bn-surface-soft-light:  #fafafa;
    --bn-surface-strong-light:#f5f5f5;

    --bn-ink:               #181a20;
    --bn-body:              #eaecef;
    --bn-body-on-light:     #181a20;
    --bn-muted:             #707a8a;
    --bn-muted-strong:      #929aa5;
    --bn-on-primary:        #181a20;
    --bn-on-dark:           #ffffff;

    --bn-hairline-on-light: #eaecef;
    --bn-hairline-on-dark:  #2b3139;
    --bn-border-strong:     #cdd1d6;

    --bn-info:              #3b82f6;
    --bn-info-ring:         #3b82f6;

    --bn-shadow-focus:   0 0 0 2px rgba(59, 130, 246, 0.5);
    --bn-shadow-subtle:  0 2px 8px rgba(0, 0, 0, 0.08);
    --bn-shadow-ring:    0 0 0 1px var(--bn-hairline-on-dark);
    --bn-shadow-ring-strong: 0 0 0 1px var(--bn-border-strong);
    --bn-shadow-card:    0 0 0 1px var(--bn-hairline-on-dark);
    --bn-shadow-card-hover: 0 0 0 1px rgba(252, 213, 53, 0.45), 0 12px 32px -8px rgba(0,0,0,0.6);
    --bn-shadow-elevated: 0 0 0 1px var(--bn-hairline-on-dark), 0 24px 48px -16px rgba(0,0,0,0.6);
}


/* ── Course pages (找到AI网校): Chinese-tuned sizes + serif display.
   Scoped here so general site headings/typography stay on Inter sans.
   Dark mode flips back to Inter sans (Binance is sans-only).
   ── */

.course-page,
.course-page :where(h1, h2, h3, h4, h5, h6) {
    --bn-font-display: var(--bn-font-serif);
    --bn-fs-hero:       56px;
    --bn-fs-display-lg: 44px;
    --bn-fs-display-md: 36px;
    --bn-fs-display-sm: 28px;
    --bn-fs-title-sm:   17px;
    --bn-fs-body-md:    15px;
    --bn-fs-nav:        15px;
    --bn-space-section: 96px;
}

[data-bs-theme="dark"] .course-page,
[data-bs-theme="dark"] .course-page :where(h1, h2, h3, h4, h5, h6) {
    --bn-font-display: Inter, -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', system-ui, sans-serif;
}


/* ── Cross-Platform Normalization ── */

html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

*,
*::before,
*::after {
    -webkit-font-smoothing: inherit;
    -moz-osx-font-smoothing: inherit;
}

* {
    scrollbar-width: thin;
    scrollbar-color: var(--bn-border-strong) transparent;
}

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

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

::-webkit-scrollbar-thumb {
    background-color: var(--bn-border-strong);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--bn-muted);
}


/* ── 3. Override parent theme / Bootstrap variables – Light theme (Claude) ── */

:root,
[data-bs-theme="light"] {

    /* Primary → Terracotta */
    --ri-primary:       #c96442;
    --ri-primary-rgb:   201, 100, 66;
    --ri-primary-text:  #c96442;

    /* Secondary → Olive Gray */
    --ri-secondary:     #5e5d59;
    --ri-secondary-rgb: 94, 93, 89;

    /* Success → muted warm green */
    --ri-success:       #7a8c6e;
    --ri-success-rgb:   122, 140, 110;

    /* Info → warm tone */
    --ri-info:          #87867f;
    --ri-info-rgb:      135, 134, 127;

    /* Warning → warm amber */
    --ri-warning:       #c9a84c;
    --ri-warning-rgb:   201, 168, 76;

    /* Danger → Error Crimson */
    --ri-danger:        #b53333;
    --ri-danger-rgb:    181, 51, 51;

    --ri-white:         #ffffff;
    --ri-light:         #faf9f5;
    --ri-light-rgb:     250, 249, 245;
    --ri-dark:          #141413;
    --ri-dark-rgb:      20, 20, 19;
    --ri-black:         #141413;

    /* Warm gray scale */
    --ri-gray:          #5e5d59;
    --ri-gray-dark:     #30302e;
    --ri-gray-100:      #faf9f5;
    --ri-gray-200:      #f0eee6;
    --ri-gray-300:      #e8e6dc;
    --ri-gray-400:      #d1cfc5;
    --ri-gray-500:      #b0aea5;
    --ri-gray-600:      #87867f;
    --ri-gray-700:      #5e5d59;
    --ri-gray-800:      #4d4c48;
    --ri-gray-900:      #30302e;

    /* Bootstrap body overrides */
    --bs-body-bg:           #f5f4ed;
    --bs-body-color:        #141413;
    --bs-body-font-family:  Inter, system-ui, -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif;
    --bs-body-line-height:  1.6;

    --bs-border-color:       #f0eee6;
    --bs-border-color-translucent: rgba(232, 230, 220, 0.75);

    --bs-link-color:         #3d3d3a;
    --bs-link-color-rgb:     61, 61, 58;
    --bs-link-hover-color:   #c96442;
    --bs-link-hover-color-rgb: 201, 100, 66;

    --bs-primary:       #c96442;
    --bs-primary-rgb:   201, 100, 66;
    --bs-secondary:     #5e5d59;
    --bs-secondary-rgb: 94, 93, 89;
    --bs-success:       #7a8c6e;
    --bs-success-rgb:   122, 140, 110;
    --bs-info:          #87867f;
    --bs-info-rgb:      135, 134, 127;
    --bs-warning:       #c9a84c;
    --bs-warning-rgb:   201, 168, 76;
    --bs-danger:        #b53333;
    --bs-danger-rgb:    181, 51, 51;
    --bs-light:         #faf9f5;
    --bs-light-rgb:     250, 249, 245;
    --bs-dark:          #141413;
    --bs-dark-rgb:      20, 20, 19;

    --bs-emphasis-color:        #141413;
    --bs-secondary-color:       #5e5d59;
    --bs-tertiary-color:        #87867f;
    --bs-secondary-bg:          #f0eee6;
    --bs-tertiary-bg:           #faf9f5;

    --bs-card-bg:       #faf9f5;
    --bs-card-border-color: #f0eee6;
    --bs-card-cap-bg:   #f0eee6;
}


/* ── 4. Override parent theme / Bootstrap variables – Dark theme (Binance) ── */

[data-bs-theme="dark"] {

    --ri-primary:       #fcd535;
    --ri-primary-rgb:   252, 213, 53;
    --ri-primary-text:  #fcd535;

    --ri-secondary:     #929aa5;
    --ri-secondary-rgb: 146, 154, 165;

    --ri-success:       #0ecb81;
    --ri-success-rgb:   14, 203, 129;

    --ri-info:          #3b82f6;
    --ri-info-rgb:      59, 130, 246;

    --ri-warning:       #f0b90b;
    --ri-warning-rgb:   240, 185, 11;

    --ri-danger:        #f6465d;
    --ri-danger-rgb:    246, 70, 93;

    --ri-light:         #1e2329;
    --ri-light-rgb:     30, 35, 41;
    --ri-dark:          #eaecef;
    --ri-dark-rgb:      234, 236, 239;

    --ri-gray:          #929aa5;
    --ri-gray-dark:     #eaecef;
    --ri-gray-100:      #0b0e11;
    --ri-gray-200:      #14171c;
    --ri-gray-300:      #1e2329;
    --ri-gray-400:      #2b3139;
    --ri-gray-500:      #474d57;
    --ri-gray-600:      #707a8a;
    --ri-gray-700:      #929aa5;
    --ri-gray-800:      #cdd1d6;
    --ri-gray-900:      #eaecef;

    --bs-body-bg:           #0b0e11;
    --bs-body-color:        #eaecef;
    --bs-body-font-family:  Inter, system-ui, -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif;
    --bs-body-line-height:  1.5;

    --bs-border-color:       #2b3139;
    --bs-border-color-translucent: rgba(43, 49, 57, 0.75);

    --bs-link-color:         #fcd535;
    --bs-link-color-rgb:     252, 213, 53;
    --bs-link-hover-color:   #f0b90b;
    --bs-link-hover-color-rgb: 240, 185, 11;

    --bs-primary:       #fcd535;
    --bs-primary-rgb:   252, 213, 53;
    --bs-secondary:     #929aa5;
    --bs-secondary-rgb: 146, 154, 165;
    --bs-success:       #0ecb81;
    --bs-success-rgb:   14, 203, 129;
    --bs-info:          #3b82f6;
    --bs-info-rgb:      59, 130, 246;
    --bs-warning:       #f0b90b;
    --bs-warning-rgb:   240, 185, 11;
    --bs-danger:        #f6465d;
    --bs-danger-rgb:    246, 70, 93;
    --bs-light:         #1e2329;
    --bs-light-rgb:     30, 35, 41;
    --bs-dark:          #eaecef;
    --bs-dark-rgb:      234, 236, 239;

    --bs-emphasis-color:        #eaecef;
    --bs-secondary-color:       #929aa5;
    --bs-tertiary-color:        #707a8a;
    --bs-secondary-bg:          #1e2329;
    --bs-tertiary-bg:           #14171c;

    --bs-card-bg:       #1e2329;
    --bs-card-border-color: #2b3139;
    --bs-card-cap-bg:   #14171c;
}


/* ── 5. Smart-Image Utility ──
   "智能填充" — same-image blurred backdrop + contain foreground.
   Image is always fully visible (object-fit: contain), with no ugly
   white/black letterbox bars: the gap is filled by the same image
   blown up + blurred. Works for any uploaded aspect ratio.

   Usage in HTML:
     <div class="bn-smart-image bn-smart-image--16x9"
          style="--bn-img:url(/path/to/cover.jpg)">
       <img src="/path/to/cover.jpg" alt="...">
     </div>

   Variants set the container aspect ratio. Add --cover to switch the
   foreground back to a hard center-crop (use for square avatars,
   small ref-thumbs, etc.).
   ── */

.bn-smart-image {
    position: relative;
    overflow: hidden;
    background-color: var(--bn-surface-strong-light);
    isolation: isolate;
}

.bn-smart-image::before {
    content: '';
    position: absolute;
    inset: -8%;
    background-image: var(--bn-img, none);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    filter: blur(28px) saturate(1.15) brightness(.92);
    transform: scale(1.15);
    z-index: 0;
    pointer-events: none;
}

[data-bs-theme="dark"] .bn-smart-image {
    background-color: var(--bn-surface-card-dark);
}

[data-bs-theme="dark"] .bn-smart-image::before {
    filter: blur(28px) saturate(1.05) brightness(.65);
}

.bn-smart-image > img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
}

.bn-smart-image--16x9 { aspect-ratio: 16 / 9; }
.bn-smart-image--4x3  { aspect-ratio: 4 / 3; }
.bn-smart-image--3x2  { aspect-ratio: 3 / 2; }
.bn-smart-image--1x1  { aspect-ratio: 1 / 1; }
.bn-smart-image--3x4  { aspect-ratio: 3 / 4; }
.bn-smart-image--16x10 { aspect-ratio: 16 / 10; }
.bn-smart-image--21x9  { aspect-ratio: 21 / 9; }
.bn-smart-image--cover > img { object-fit: cover; }
.bn-smart-image--cover::before { display: none; }

@media (prefers-reduced-motion: reduce) {
    .bn-smart-image::before { transform: scale(1.1); }
}