/*
 * Dark Atlas - Design Tokens
 * Auto-generated from design2.pen via Pencil MCP
 * Source of truth for all colors, typography, and spacing.
 * DO NOT hardcode hex values or font strings anywhere in the theme.
 * Always reference these custom properties.
 *
 * Generated: 2026-03-21
 */

/* ============================================================
   DARK MODE (default)
   ============================================================ */
:root,
:root[data-theme="dark"] {

    /* --- Backgrounds --- */
    --bg-base:    #0D0E0B;
    --bg-sunken:  #111309;
    --bg-surface: #1A1C14;
    --bg-warning: #1A0E0B;

    /* --- Borders --- */
    --border-default: #2A2C22;
    --border-subtle:  #3A3C32;

    /* --- Text --- */
    --text-primary:   #EDE9DE;
    --text-secondary: #909088;
    --text-body:      #C8C4B8;
    --text-muted:     #787870;
    --text-ghost:     #555550;

    /* --- Accents --- */
    --accent-amber:  #D4691E;
    --accent-green:  #B8CC1A;
    --accent-online: #FF8C00;

    /* --- Difficulty badges: Beginner --- */
    --badge-beginner-fill:   #1A2414;
    --badge-beginner-stroke: #2A3C22;
    --badge-beginner-text:   #B8CC1A;

    /* --- Difficulty badges: Intermediate --- */
    --badge-intermediate-fill:   #2A1A08;
    --badge-intermediate-stroke: #4A3010;
    --badge-intermediate-text:   #D4691E;

    /* --- Difficulty badges: Advanced --- */
    --badge-advanced-fill:   #3F1515;
    --badge-advanced-stroke: #5B1919;
    --badge-advanced-text:   #E62A2A;

    /* --- Filter pills --- */
    --filter-pill-selected-fill:    #CACACA;
    --filter-pill-unselected-fill:  #1A1C14;
    --filter-pill-stroke:           #2A2C22;
    --filter-pill-text-selected:    #0D0E0B;
    --filter-pill-text-unselected:  #7A7870;

    /* --- Topic tag pill --- */
    --topic-tag-pill-fill:   #1A2C2E;
    --topic-tag-pill-stroke: #2A4C4E;
    --topic-tag-pill-text:   #78BEBE;
    --topic-tag-pill-icon:   #78BEBE;

    /* --- Meta panel --- */
    --meta-panel-head-fill:  #111309;
    --meta-panel-entry-fill: #1A1C14;
    --meta-panel-stroke:     #2A2C22;
}

/* ============================================================
   LIGHT MODE
   ============================================================ */
:root[data-theme="light"] {

    /* --- Backgrounds --- */
    --bg-base:    #F5F3EE;
    --bg-sunken:  #EDEBE5;
    --bg-surface: #E9E9E9;
    --bg-warning: #FFF3EE;

    /* --- Borders --- */
    --border-default: #D4D0C4;
    --border-subtle:  #E4E0D4;

    /* --- Text --- */
    --text-primary:   #1A1C14;
    --text-secondary: #5A5850;
    --text-body:      #2E2C26;
    --text-muted:     #6A6865;
    --text-ghost:     #8C8880;

    /* --- Accents --- */
    --accent-amber:  #9A4810;
    --accent-green:  #5C7A00;
    --accent-online: #CC6600;

    /* --- Difficulty badges: Beginner --- */
    --badge-beginner-fill:   #EEF4E0;
    --badge-beginner-stroke: #C8D8A0;
    --badge-beginner-text:   #4A6A00;

    /* --- Difficulty badges: Intermediate --- */
    --badge-intermediate-fill:   #FBF0E4;
    --badge-intermediate-stroke: #E8C898;
    --badge-intermediate-text:   #9A4410;

    /* --- Difficulty badges: Advanced --- */
    --badge-advanced-fill:   #FBEAEA;
    --badge-advanced-stroke: #E8B0B0;
    --badge-advanced-text:   #C01010;

    /* --- Filter pills --- */
    --filter-pill-selected-fill:    #1A1C14;
    --filter-pill-unselected-fill:  #EDEBE5;
    --filter-pill-stroke:           #D4D0C4;
    --filter-pill-text-selected:    #F5F3EE;
    --filter-pill-text-unselected:  #5A5850;

    /* --- Topic tag pill --- */
    --topic-tag-pill-fill:   #E4F0F0;
    --topic-tag-pill-stroke: #A8CCCC;
    --topic-tag-pill-text:   #2A6868;
    --topic-tag-pill-icon:   #2A6868;

    /* --- Meta panel --- */
    --meta-panel-head-fill:  #EDEBE5;
    --meta-panel-entry-fill: #E9E9E9;
    --meta-panel-stroke:     #D4D0C4;
}

/* ============================================================
   TYPOGRAPHY - theme-independent
   (font stacks, not theme-specific)
   ============================================================ */
:root {
    --font-ui:   'Space Mono', 'Courier New', monospace;
    --font-body: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;

    /* --- Type scale (px values from design tokens) --- */
    --text-2xs:      7px;   /* $text-2xs  - ticker codes, decorative only */
    --text-ui:       8px;   /* $text-ui   - badge labels, very small UI */
    --text-xs:       9px;   /* $text-xs   - metadata, timestamps */
    --text-sm:      10px;   /* $text-sm   - secondary labels */
    --text-base:    11px;   /* $text-base - base UI text */
    --text-md:      12px;   /* $text-md   */
    --text-lg:      13px;   /* $text-lg   */
    --text-xl:      14px;   /* $text-xl   */
    --text-2xl:     15px;   /* $text-2xl  - body text */
    --text-3xl:     16px;   /* $text-3xl  - nav items */
    --text-4xl:     18px;   /* $text-4xl  */
    --text-8xl:     20px;   /* $text-8xl  */
    --text-5xl:     22px;   /* $text-5xl  */
    --text-9xl:     24px;   /* $text-9xl  */
    --text-6xl:     28px;   /* $text-6xl  - section headings */
    --text-7xl:     40px;   /* $text-7xl  */
    --text-h2:      36px;   /* $text-h2   - stat numbers, section titles */
    --text-h1:      48px;   /* $text-h1   - page H1 */
    --text-hero:    32px;   /* $text-hero */
    --text-display: 96px;   /* $text-display - homepage hero title */
    --text-display-lg: 120px; /* $text-display-lg */

    /* --- Spacing --- */
    --spacing-section:    32px;  /* $spacing-section */
    --spacing-col-gap:    48px;  /* $spacing-col-gap */
    --spacing-page-x:     80px;  /* $spacing-page-x - desktop side padding */

    /* --- Layout --- */
    --width-article-max: 720px;  /* $width-article-max */
    --width-sidebar:     300px;  /* $width-sidebar */
}

/* --- Mobile type scale overrides ---------------------------------------- */
/* $text-ui (8px) is below the 11px legibility floor on real devices.
   Override to 11px on mobile viewports only. */
@media (max-width: 767px) {
    :root,
    :root[data-theme="dark"],
    :root[data-theme="light"] {
        --text-ui:  11px;
        --text-xs:  11px;
        --text-2xl: 16px; /* article body text - 15px is below mobile legibility floor */
        --text-h2:  28px; /* stat numbers scale down slightly on mobile */
    }
}