/* ===== ROOT VARIABLES ===== */
:root {
    /* Background Colors - LIGHT THEME */
    --bg-primary: #ffffff;
    --bg-secondary: #f8f9fa;
    --bg-tertiary: #e9ecef;
    --bg-card: #f5f5f5;
    
    /* Text Colors */
    --text-primary: #000000;
    --text-secondary: #666666;
    
    /* Border & Shadows */
    --border-color: #e0e0e0;
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.15);
    
    /* Bubble Menu Colors - COLORFUL! */
    --bubble-logo-bg: #000000;
    --bubble-menu-bg: #000000;
    --bubble-overlay-bg: rgba(255, 255, 255, 0.95);
    
    /* Pill Colors - Each pill can be different! */
    --pill-home: #000000;
    --pill-about: #F4F0DE;
    --pill-projects: #E7E2D3;
    --pill-skills: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
    --pill-awards: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
    
    /* Glitch Colors - Colorful! */
    --glitch-color-1: rgba(255, 50, 50, 0.3);    /* Red */
    --glitch-color-2: rgba(50, 150, 255, 0.3);   /* Blue */
    --glitch-color-3: rgba(50, 255, 150, 0.3);   /* Green */
    --glitch-color-4: rgba(255, 150, 50, 0.3);   /* Orange */
    --glitch-color-5: rgba(200, 50, 255, 0.3);   /* Purple */
    --glitch-color-6: rgba(255, 255, 50, 0.3);   /* Yellow */
    
    /* Transition */
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    /* Accent (terminal green) + surfaces used by CLI mode and new GUI parts */
    --accent: #12864a;
    --accent-soft: rgba(18, 134, 74, 0.12);
    --accent-contrast: #ffffff;
    --link: #0a66c2;
    --grid-line: rgba(0, 0, 0, 0.045);
    --wp-ink: rgba(0, 0, 0, 0.055);          /* wallpaper pattern ink (dots / isometric) */
    --pv-ink: rgba(120, 120, 120, 0.42);     /* settings-preview thumbnail ink (theme-agnostic) */
    --warn: #b26a12;   /* amber / terminal orange */

    /* Scrollbars */
    --sb-thumb: rgba(120, 120, 120, 0.28);
    --sb-thumb-hover: rgba(120, 120, 120, 0.5);

    /* UI typeface (Settings → Language → Font). Terminal/code and the
       serif display headings (home title, site name) are NOT tied to this —
       only general interface text is. */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'PingFang TC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans CJK SC', 'Noto Sans CJK TC', sans-serif;
}

/* ===== FONT STYLE VARIANTS (Settings → Language → Font) ===== */
:root[data-font="system"] { --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'PingFang SC', 'PingFang TC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans CJK SC', 'Noto Sans CJK TC', sans-serif; }
:root[data-font="serif"] { --font-sans: 'Newsreader', Georgia, 'Times New Roman', 'Songti SC', 'Songti TC', 'Noto Serif CJK SC', 'Noto Serif CJK TC', serif; }
:root[data-font="mono"]  { --font-sans: 'Fira Code', ui-monospace, Menlo, Consolas, 'PingFang SC', 'Microsoft YaHei', monospace; }

/* ===== ZOOM (Settings → Accessibility → Zoom) ===== */
/* a percentage on the root font-size scales every rem-based measurement on
   the site (type, spacing, controls) together, and still layers on top of
   whatever font size the visitor's own browser is set to. */
:root[data-zoom="90"]  { font-size: 90%; }
:root[data-zoom="115"] { font-size: 115%; }
:root[data-zoom="130"] { font-size: 130%; }

/* ===== DARK MODE VARIABLES ===== */
[data-theme="dark"] {
    /* Background Colors - DARK THEME */
    --bg-primary: #0a0a0a;
    --bg-secondary: #111111;
    --bg-tertiary: #1a1a1a;
    --bg-card: #161616;
    
    /* Text Colors */
    --text-primary: #ffffff;
    --text-secondary: #a0a0a0;
    
    /* Border & Shadows */
    --border-color: #2a2a2a;
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.6);
    
    /* Bubble Menu Colors */
    --bubble-logo-bg: #ffffff;
    --bubble-menu-bg: #ffffff;
    --bubble-overlay-bg: rgba(0, 0, 0, 0.95);
    
    /* Pill Colors for Dark Mode */
    --pill-home: #ffffff;
    
    /* Glitch Colors - Colorful! */
    --glitch-color-1: rgba(255, 100, 100, 0.4);  /* Red */
    --glitch-color-2: rgba(100, 180, 255, 0.4);  /* Blue */
    --glitch-color-3: rgba(100, 255, 180, 0.4);  /* Green */
    --glitch-color-4: rgba(255, 180, 100, 0.4);  /* Orange */
    --glitch-color-5: rgba(220, 100, 255, 0.4);  /* Purple */
    --glitch-color-6: rgba(255, 255, 100, 0.4);  /* Yellow */

    /* Accent for dark theme */
    --accent: #26d07c;
    --accent-soft: rgba(38, 208, 124, 0.14);
    --accent-contrast: #05130c;
    --link: #6cb6ff;
    --grid-line: rgba(255, 255, 255, 0.04);
    --wp-ink: rgba(255, 255, 255, 0.05);
    --warn: #f2a34d;   /* amber / terminal orange */

    --sb-thumb: rgba(160, 160, 160, 0.22);
    --sb-thumb-hover: rgba(160, 160, 160, 0.42);
}

/* ===== ACCENT COLOUR VARIANTS (Settings → Accent colour) ===== */
/* default 'green' keeps the values above. Light blocks first, then dark
   (equal specificity — the dark ones must win when both match). */
:root[data-accent="blue"]   { --accent: #1e66d0; --accent-soft: rgba(30, 102, 208, 0.12); --accent-contrast: #ffffff; }
:root[data-accent="indigo"] { --accent: #4338ca; --accent-soft: rgba(67, 56, 202, 0.12); --accent-contrast: #ffffff; }
:root[data-accent="purple"] { --accent: #7c3aed; --accent-soft: rgba(124, 58, 237, 0.12); --accent-contrast: #ffffff; }
:root[data-accent="pink"]   { --accent: #d1367f; --accent-soft: rgba(209, 54, 127, 0.12); --accent-contrast: #ffffff; }
:root[data-accent="amber"]  { --accent: #a2650f; --accent-soft: rgba(162, 101, 15, 0.14); --accent-contrast: #1a1200; }
:root[data-accent="teal"]   { --accent: #0e8a83; --accent-soft: rgba(14, 138, 131, 0.12); --accent-contrast: #ffffff; }
[data-theme="dark"][data-accent="blue"]   { --accent: #5b9bff; --accent-soft: rgba(91, 155, 255, 0.16); --accent-contrast: #04101f; }
[data-theme="dark"][data-accent="indigo"] { --accent: #818cf8; --accent-soft: rgba(129, 140, 248, 0.16); --accent-contrast: #0d0a2e; }
[data-theme="dark"][data-accent="purple"] { --accent: #b794f6; --accent-soft: rgba(183, 148, 246, 0.16); --accent-contrast: #120726; }
[data-theme="dark"][data-accent="pink"]   { --accent: #ff7ab8; --accent-soft: rgba(255, 122, 184, 0.16); --accent-contrast: #35091c; }
[data-theme="dark"][data-accent="amber"]  { --accent: #f2a34d; --accent-soft: rgba(242, 163, 77, 0.16); --accent-contrast: #1a1200; }
[data-theme="dark"][data-accent="teal"]   { --accent: #2dd4bf; --accent-soft: rgba(45, 212, 191, 0.16); --accent-contrast: #04211e; }

/* ===== RESET & BASE STYLES ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-sans);
    background-color: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
    overflow-x: hidden;
    transition: background-color 0.3s ease, color 0.3s ease;
}