/*
================================================================
THEME.CSS — DESIGN TOKENS
All visual constants live here. Edit this file to restyle the
entire site. Other CSS files must not hardcode these values.
================================================================
*/

:root {

    /* ===== PAGE COLORS ===== */
    --color-bg-page:         #1a1a1a;   /* Main page background */
    --color-bg-surface:      #2d2d2d;   /* Cards, header, footer */
    --color-bg-surface-deep: #252525;   /* Viz container, modal header */
    --color-bg-surface-mid:  #252525;   /* Mid-level panels (modal header bg) */

    /* ===== BORDER COLORS ===== */
    --color-border:          #444444;   /* Standard borders */
    --color-border-subtle:   #555555;   /* Lighter panel borders */
    --color-border-control:  #666666;   /* Button / input outlines */

    /* ===== TEXT COLORS ===== */
    --color-text-primary:    #ffffff;   /* Body copy, labels */
    --color-text-secondary:  #cccccc;   /* Descriptions, subtext */
    --color-text-muted:      #888888;   /* Footer, placeholders */

    /* ===== ACCENT / BRAND ===== */
    --color-accent:          #4a9eff;   /* Chamber Blue — links, highlights */
    --color-accent-hover:    #3a8eef;   /* Darker on hover */

    /* ===== DIRECTORY ===== */
    --color-directory-group-heading: #4a9eff;  /* Group category headers */

    /* ===== NODE COLORS (D3 map) ===== */
    --color-node-hub:        #ffffff;
    --color-node-group:      #4a9eff;   /* Major-group nodes */
    --color-node-asset:      #66bb6a;   /* Asset leaf nodes */

    /* ===== HEADER FONTS ===== */
    --font-heading:          -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-heading-weight:   600;
    --font-heading-size-xl:  2.5rem;    /* Page h2 */
    --font-heading-size-lg:  1.6rem;    /* Section h3 */
    --font-heading-size-md:  1.4rem;    /* Modal title */
    --font-heading-size-sm:  1.2rem;    /* Card h3 */
    --font-logo-size:        1.5rem;

    /* ===== PAGE / BODY FONTS ===== */
    --font-body:             -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-size-xs:          0.8rem;
    --font-size-sm:          0.85rem;
    --font-size-base:        1rem;
    --font-size-md:          1.05rem;
    --font-size-lg:          1.1rem;
    --font-size-footer:      0.9rem;
    --line-height-body:      1.6;
    --line-height-relaxed:   1.8;

    /* ===== SHAPE & SPACING ===== */
    --radius-sm:             4px;
    --radius-md:             8px;
    --radius-lg:             12px;
    --radius-pill:           20px;

    /* ===== TRANSITIONS ===== */
    --transition-fast:       0.2s ease;
    --transition-base:       0.3s ease;
}