/* ============================================================
   Design Tokens — Textbook Layout
   ============================================================
   Single source of truth for the new scrolling textbook design.
   Every color, size, spacing, and visual constant lives here.
   Change here = changes everywhere.

   Reference: pages/learn/DESIGN-POC.html
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:wght@400;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;600&display=swap');

:root {
    /* ============================================================
       Colors: Backgrounds
       ============================================================ */
    --bg:               #141414;
    --bg-sidebar:       #101010;
    --bg-surface:       #1c1c1c;
    --bg-navbar:        #0c0c0c;
    --bg-overlay:       rgba(14, 14, 14, 0.92);
    --bg-fullscreen:    rgba(8, 8, 8, 0.98);
    --bg-dim-btn:       rgba(10, 10, 10, 0.7);
    --bg-dim-btn-hover: rgba(20, 20, 20, 0.9);

    /* ============================================================
       Colors: Borders
       ============================================================ */
    --border:           #232323;
    --border-active:    #2e2e2e;

    /* ============================================================
       Colors: Text
       ============================================================ */
    --text:             #e0e0e0;
    --text-bright:      #f2f2f2;
    --text-muted:       #868686;
    --text-dim:         #505050;
    --text-on-accent:   #ffffff;

    /* ============================================================
       Colors: Accent
       ============================================================ */
    --accent:           #5a8ec6;
    --accent-light:     #7aacdd;

    /* ============================================================
       Colors: Content Types
       ============================================================ */
    --color-formula:        #c9a84c;
    --color-formula-bg:     rgba(201, 168, 76, 0.04);
    --color-tip:            #8878b0;
    --color-tip-bg:         rgba(136, 120, 176, 0.04);
    --color-insight:        #6dbe82;
    --color-insight-bg:     rgba(109, 190, 130, 0.04);
    --color-definition:     #5a8ec6;
    --color-reference:      #8878b0;
    --color-error:          #c85858;
    --color-key:            #6dbe82;

    /* ============================================================
       Typography: Font Families
       ============================================================ */
    --font-body:  'Source Serif 4', Georgia, serif;
    --font-ui:    'Inter', sans-serif;
    --font-mono:  'JetBrains Mono', monospace;
    --font-math:  'Cambria Math', serif;

    /* ============================================================
       Typography: Font Sizes
       ============================================================ */
    --text-body:            16.5px;
    --text-page-title:      28px;
    --text-page-subtitle:   14px;
    --text-section-title:   21px;
    --text-aside:           14.5px;
    --text-breadcrumb:      11px;
    --text-toc:             12px;
    --text-toc-sub:         11.5px;
    --text-toc-chapter:     12.5px;
    --text-toc-heading:     9px;
    --text-navbar-logo:     13px;
    --text-navbar-input:    12px;
    --text-navbar-btn:      11px;
    --text-fig-controls:    11px;
    --text-fig-caption:     11px;
    --text-fig-info:        11.5px;
    --text-fig-info-title:  9px;
    --text-fig-toggle:      13px;
    --text-dim-btn:         10px;
    --text-expand-btn:      16px;
    --text-close-btn:       11px;
    --text-formula-label:   9px;
    --text-formula-expr:    22px;
    --text-formula-note:    12px;
    --text-aside-heading:   10px;
    --text-margin-note:     12px;
    --text-margin-label:    9px;
    --text-margin-formula:  13px;
    --text-margin-link:     11px;
    --text-page-nav:        12px;
    --text-control-value:   10px;
    --text-slider-label:    11px;
    --text-select:          11px;
    --text-observe:         12px;
    --text-verification:    11px;

    /* ============================================================
       Typography: Font Weights
       ============================================================ */
    --font-normal:    400;
    --font-medium:    500;
    --font-semibold:  600;
    --font-bold:      700;

    /* ============================================================
       Typography: Line Heights
       ============================================================ */
    --leading-body:     1.85;
    --leading-tight:    1.3;
    --leading-normal:   1.55;
    --leading-relaxed:  1.65;

    /* ============================================================
       Typography: Letter Spacing
       ============================================================ */
    --tracking-caps:  1.5px;
    --tracking-label: 1px;

    /* ============================================================
       Spacing
       ============================================================ */
    --space-2xs:  3px;
    --space-xs:   4px;
    --space-sm:   5px;
    --space-md:   6px;
    --space-lg:   8px;
    --space-xl:   10px;
    --space-2xl:  12px;
    --space-3xl:  14px;
    --space-4xl:  16px;
    --space-5xl:  18px;
    --space-6xl:  20px;
    --space-7xl:  28px;
    --space-8xl:  36px;
    --space-9xl:  44px;
    --frac-padding: 2px;

    /* ============================================================
       Layout
       ============================================================ */
    --navbar-height:    44px;
    --toc-width:        220px;
    --content-width:    720px;
    --margin-width:     210px;
    --margin-gap:       36px;
    --figure-height:    340px;
    --content-padding:  36px;
    --area-padding-bottom: 120px;
    /* Breakpoints (for reference — CSS vars can't be used in @media):
       No margin column: 1100px
       No TOC sidebar:   860px */

    /* ============================================================
       Radii
       ============================================================ */
    --radius-sm:  4px;
    --radius-md:  5px;
    --radius-lg:  6px;
    --radius-xl:  8px;

    /* ============================================================
       Transitions
       ============================================================ */
    --transition-fast: 0.15s;
    --transition-normal: 0.2s;

    /* ============================================================
       Z-index
       ============================================================ */
    --z-toc:              40;
    --z-navbar:           50;
    --z-figure-info:      4;
    --z-figure-controls:  5;
    --z-figure-close:     10;
    --z-fullscreen:       1000;

    /* ============================================================
       Scrollbar
       ============================================================ */
    --scrollbar-width:  2px;
    --scrollbar-track:  transparent;
    --scrollbar-thumb:  var(--border);

    /* ============================================================
       Slider
       ============================================================ */
    --slider-height:    3px;
    --slider-max-width: 120px;
    --slider-accent:    var(--accent);

    /* ============================================================
       Checkbox
       ============================================================ */
    --checkbox-size:    14px;
    --checkbox-accent:  var(--accent);

    /* ============================================================
       Figure
       ============================================================ */
    --fig-info-width:           170px;
    --fig-info-offset:          10px;
    --fig-info-collapsed-min:   115px;
    --fig-info-fullscreen-width: 240px;
    --fig-info-fullscreen-top:   54px;
    --fig-dim-fullscreen-left:   130px;
    --fig-expand-size:          30px;
    --blur-overlay:             8px;
    --border-accent-width:      3px;
    --border-accent-width-sm:   2px;
    --fig-controls-padding-h:   14px;
    --fig-controls-padding-v:   8px;
    --fig-controls-gap:         12px;
    --fig-controls-sep-height:  14px;
    --fig-controls-label-min:   30px;
    --fig-controls-value-min:   24px;

    /* ============================================================
       Mark (logo icon)
       ============================================================ */
    --mark-size:  22px;
    --mark-font:  11px;

    /* ============================================================
       Navbar input
       ============================================================ */
    --navbar-input-width: 180px;
}