/* Apple //e Emulator - Base Styles
   Variables, reset, body, and utility classes
*/

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* Color palette - derived from the Apple rainbow logo stripes
       Green: #61BB46  Yellow: #FDB827  Orange: #F5821F
       Red:   #E03A3E  Purple: #963D97  Blue:   #009DDC */
    --bg-dark: #0d1117;
    --bg-medium: #161b22;
    --bg-light: #21262d;
    --bg-panel: #1c2128;
    --bg-primary: #0d1117;

    --text-primary: #e6edf3;
    --text-secondary: #8b949e;
    --text-muted: #6e7681;

    --accent-green: #6EC94F;
    --accent-green-dim: #3D8F2B;
    --accent-yellow: #FDBE34;
    --accent-blue: #18ABEA;
    --accent-orange: #F68D35;
    --accent-red: #E5504F;
    --accent-purple: #B55DB6;

    /* Apple beige/cream for monitor */
    --monitor-beige: #c9c2b0;
    --monitor-beige-dark: #a89f8e;
    --monitor-beige-light: #ddd6c6;

    /* Disk drive colors */
    --drive-beige: #c4b998;
    --drive-beige-dark: #9e9478;

    --border-default: #30363d;
    --border-muted: #21262d;

    /* Fonts */
    --font-sans:
        "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-mono: "JetBrains Mono", "SF Mono", "Menlo", monospace;

    /* Spacing */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;

    /* Border radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
    --shadow-window: 0 2px 12px rgba(0, 0, 0, 0.2);
    --shadow-window-focused: 0 8px 40px rgba(0, 0, 0, 0.85), 0 2px 16px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(24, 171, 234, 0.5);
    --shadow-glow: 0 0 20px rgba(110, 201, 79, 0.3);

    /* Text selection colors (for screen text copy feature) */
    --selection-highlight: rgba(24, 171, 234, 0.35);
    --selection-copy-flash: rgba(110, 201, 79, 0.5);

    /* Glassmorphism / overlay semantic tokens */
    --glass-bg: rgba(13, 17, 23, 0.85);
    --glass-bg-solid: rgba(13, 17, 23, 0.95);
    --glass-bg-header: rgba(33, 38, 45, 0.6);
    --glass-border: rgba(48, 54, 61, 0.6);
    --glass-border-light: rgba(48, 54, 61, 0.4);
    --glass-border-subtle: rgba(48, 54, 61, 0.3);

    /* Control backgrounds */
    --control-bg: rgba(33, 38, 45, 0.5);
    --control-bg-solid: rgba(33, 38, 45, 0.6);
    --control-bg-hover: rgba(48, 54, 61, 0.6);
    --control-bg-active: rgba(48, 54, 61, 0.8);
    --control-border: rgba(48, 54, 61, 0.4);
    --control-border-hover: rgba(48, 54, 61, 0.7);
    --separator-bg: rgba(48, 54, 61, 0.5);

    /* Input fields */
    --input-bg: rgba(0, 0, 0, 0.15);
    --input-bg-deep: rgba(0, 0, 0, 0.25);
    --input-bg-deeper: rgba(0, 0, 0, 0.3);
    --input-bg-dark: rgba(0, 0, 0, 0.2);

    /* Overlay/hover layers */
    --overlay-subtle: rgba(255, 255, 255, 0.04);
    --overlay-hover: rgba(255, 255, 255, 0.08);
    --overlay-active: rgba(255, 255, 255, 0.15);
    --overlay-faint: rgba(255, 255, 255, 0.05);
    --overlay-white-10: rgba(255, 255, 255, 0.1);
    --overlay-white-02: rgba(255, 255, 255, 0.02);

    /* Accent-tinted backgrounds */
    --accent-green-bg: rgba(110, 201, 79, 0.15);
    --accent-green-bg-strong: rgba(110, 201, 79, 0.2);
    --accent-green-bg-stronger: rgba(110, 201, 79, 0.3);
    --accent-green-border: rgba(110, 201, 79, 0.4);
    --accent-green-border-light: rgba(110, 201, 79, 0.25);
    --accent-yellow-bg: rgba(253, 190, 52, 0.15);
    --accent-yellow-bg-strong: rgba(253, 190, 52, 0.2);
    --accent-yellow-border: rgba(253, 190, 52, 0.3);
    --accent-blue-bg: rgba(24, 171, 234, 0.15);
    --accent-blue-bg-strong: rgba(24, 171, 234, 0.2);
    --accent-blue-bg-stronger: rgba(24, 171, 234, 0.3);
    --accent-blue-border: rgba(24, 171, 234, 0.4);
    --accent-blue-border-light: rgba(24, 171, 234, 0.3);
    --accent-orange-bg: rgba(246, 141, 53, 0.15);
    --accent-orange-bg-strong: rgba(246, 141, 53, 0.2);
    --accent-orange-border: rgba(246, 141, 53, 0.3);
    --accent-orange-border-strong: rgba(246, 141, 53, 0.4);
    --accent-orange-border-stronger: rgba(246, 141, 53, 0.5);
    --accent-red-bg: rgba(229, 80, 79, 0.12);
    --accent-red-bg-strong: rgba(229, 80, 79, 0.15);
    --accent-red-bg-stronger: rgba(229, 80, 79, 0.2);
    --accent-red-border: rgba(229, 80, 79, 0.4);
    --accent-purple-bg: rgba(181, 93, 182, 0.15);
    --accent-purple-bg-strong: rgba(181, 93, 182, 0.2);

    /* Register flash (CPU debugger change highlight) */
    --reg-flash-color: #FDBE34;
    --reg-flash-bg: rgba(253, 190, 52, 0.3);

    /* Editor container (BASIC program window) */
    --editor-bg: rgba(0, 0, 0, 0.4);
    --editor-focus-border: rgba(110, 201, 79, 0.6);
    --editor-focus-shadow: rgba(110, 201, 79, 0.15);
    --editor-placeholder: rgba(110, 201, 79, 0.4);
    --editor-linenum: #6e7681;
    --editor-var: #E5504F;

    /* Flag glow (CPU debugger active flags) */
    --flag-active-glow: rgba(110, 201, 79, 0.25);

    /* Miscellaneous */
    --badge-dim-bg: rgba(110, 118, 129, 0.2);
    --badge-dim-border: rgba(110, 118, 129, 0.3);
    --irq-dim-bg: rgba(128, 128, 128, 0.1);
    --irq-dim-border: rgba(128, 128, 128, 0.2);
    --muted-bg: rgba(139, 148, 158, 0.2);
    --reference-border: rgba(255, 255, 255, 0.1);
    --body-gradient-end: #0a0e14;

    /* Canvas drawing backgrounds (opaque, for JS canvas clearing) */
    --canvas-bg: #05050a;
    --canvas-line: #1a1a2a;

    /* Disk surface rendering */
    --disk-bg: #161b22;
    --disk-medium: #1a1308;
    --disk-sector-line: rgba(255, 255, 255, 0.08);
    --disk-ghost-outline: rgba(255, 255, 255, 0.06);
    --disk-ghost-sector: rgba(255, 255, 255, 0.03);
    --disk-ghost-hub: rgba(210, 208, 200, 0.08);
    --disk-hub-ring: rgba(210, 208, 200, 0.85);
    --disk-hub-edge: rgba(255, 255, 255, 0.12);
    --disk-hub-edge-inner: rgba(255, 255, 255, 0.08);
    --disk-hole-edge: rgba(0, 0, 0, 0.3);
    --disk-edge: rgba(255, 255, 255, 0.06);
    --disk-label-color: rgba(255, 255, 255, 0.45);

    /* Reminder gradient backgrounds */
    --reminder-bg-start: #1e3a5f;
    --reminder-bg-end: #0d2137;

    /* Syntax highlighting (dark theme - Apple logo palette) */
    --syntax-flow: #E5504F;
    --syntax-load: #6EC94F;
    --syntax-math: #F68D35;
    --syntax-stack: #B55DB6;
    --syntax-flag: #18ABEA;
    --syntax-data: #8b949e;
    --syntax-comment: #8b949e;
    --syntax-number: #18ABEA;
    --syntax-keyword: #18ABEA;
    --syntax-string: #6EC94F;
    --syntax-operator: #B55DB6;
    --syntax-register: #6EC94F;
    --syntax-addr: #7c8799;
    --syntax-separator: #4a5568;
    --syntax-hex-byte: #18ABEA;
    --syntax-hex-zero: #4a5568;
    --syntax-hex-printable: #6EC94F;
    --syntax-hex-highbit: #B55DB6;
    --syntax-ascii-printable: #F68D35;
    --syntax-ascii-dot: #3a4556;
    --syntax-ascii-separator: #3a4556;
    --syntax-flow-bright: #6EC94F;
    --syntax-const: #C87DC9;
    --syntax-const-bright: #DA99DB;
    --syntax-symbol-zp: #6EC94F;
    --syntax-symbol-sw: #F68D35;
    --syntax-symbol-disk: #FDBE34;
    --syntax-symbol-rom: #18ABEA;
    --syntax-symbol-basic: #B55DB6;
    --syntax-symbol-vec: #E5504F;
    --syntax-symbol-io: #4DC4F0;
    --syntax-symbol-zp-bright: #8CDB78;
    --syntax-symbol-sw-bright: #F8A864;
    --syntax-symbol-disk-bright: #FECE63;
    --syntax-symbol-rom-bright: #5CC0EE;
    --syntax-symbol-basic-bright: #C87DC9;
    --syntax-symbol-vec-bright: #ED7A7C;
    --syntax-symbol-io-bright: #7ED1F3;

    /* Memory browser */
    --mem-byte: #18ABEA;
    --mem-zero: #4a5568;
    --mem-printable: #6EC94F;
    --mem-highbit: #B55DB6;
    --mem-ascii: #F68D35;
    --mem-addr: #7c8799;
    --mem-separator: #4a5568;
    --mem-scrollbar-thumb: rgba(24, 171, 234, 0.4);
    --mem-scrollbar-thumb-hover: rgba(24, 171, 234, 0.6);
}

/* ============================================
   LIGHT THEME
   ============================================ */
html[data-theme="light"] {
    --bg-dark: #ffffff;
    --bg-medium: #f6f8fa;
    --bg-light: #e8ecf0;
    --bg-panel: #eef1f5;
    --bg-primary: #ffffff;

    --text-primary: #1f2328;
    --text-secondary: #656d76;
    --text-muted: #8b949e;

    --accent-green: #3A7D29;
    --accent-green-dim: #d5f0d0;
    --accent-yellow: #8A6200;
    --accent-blue: #006FA3;
    --accent-orange: #A35A0E;
    --accent-red: #B42D31;
    --accent-purple: #723075;

    --border-default: #d0d7de;
    --border-muted: #e8ecf0;

    /* Shadows - much lighter in light theme */
    --shadow-sm: 0 1px 2px rgba(31, 35, 40, 0.08);
    --shadow-md: 0 4px 12px rgba(31, 35, 40, 0.12);
    --shadow-lg: 0 8px 24px rgba(31, 35, 40, 0.16);
    --shadow-window: 0 2px 12px rgba(31, 35, 40, 0.06);
    --shadow-window-focused: 0 8px 40px rgba(31, 35, 40, 0.4), 0 2px 16px rgba(31, 35, 40, 0.3), 0 0 0 1px rgba(0, 111, 163, 0.4);
    --shadow-glow: 0 0 20px rgba(58, 125, 41, 0.2);

    --selection-highlight: rgba(0, 111, 163, 0.2);
    --selection-copy-flash: rgba(58, 125, 41, 0.3);

    /* Glassmorphism */
    --glass-bg: rgba(255, 255, 255, 0.92);
    --glass-bg-solid: rgba(255, 255, 255, 0.97);
    --glass-bg-header: rgba(246, 248, 250, 0.8);
    --glass-border: rgba(208, 215, 222, 0.8);
    --glass-border-light: rgba(208, 215, 222, 0.6);
    --glass-border-subtle: rgba(208, 215, 222, 0.4);

    /* Control backgrounds */
    --control-bg: rgba(246, 248, 250, 0.8);
    --control-bg-solid: rgba(232, 236, 240, 0.8);
    --control-bg-hover: rgba(208, 215, 222, 0.6);
    --control-bg-active: rgba(208, 215, 222, 0.8);
    --control-border: rgba(208, 215, 222, 0.6);
    --control-border-hover: rgba(208, 215, 222, 0.9);
    --separator-bg: rgba(208, 215, 222, 0.6);

    /* Input fields */
    --input-bg: rgba(246, 248, 250, 0.6);
    --input-bg-deep: rgba(232, 236, 240, 0.6);
    --input-bg-deeper: rgba(232, 236, 240, 0.8);
    --input-bg-dark: rgba(246, 248, 250, 0.8);

    /* Overlay/hover layers */
    --overlay-subtle: rgba(31, 35, 40, 0.04);
    --overlay-hover: rgba(31, 35, 40, 0.08);
    --overlay-active: rgba(31, 35, 40, 0.12);
    --overlay-faint: rgba(31, 35, 40, 0.04);
    --overlay-white-10: rgba(31, 35, 40, 0.06);
    --overlay-white-02: rgba(31, 35, 40, 0.02);

    /* Accent-tinted backgrounds */
    --accent-green-bg: rgba(58, 125, 41, 0.1);
    --accent-green-bg-strong: rgba(58, 125, 41, 0.15);
    --accent-green-bg-stronger: rgba(58, 125, 41, 0.2);
    --accent-green-border: rgba(58, 125, 41, 0.3);
    --accent-green-border-light: rgba(58, 125, 41, 0.2);
    --accent-yellow-bg: rgba(138, 98, 0, 0.08);
    --accent-yellow-bg-strong: rgba(138, 98, 0, 0.12);
    --accent-yellow-border: rgba(138, 98, 0, 0.2);
    --accent-blue-bg: rgba(0, 111, 163, 0.1);
    --accent-blue-bg-strong: rgba(0, 111, 163, 0.15);
    --accent-blue-bg-stronger: rgba(0, 111, 163, 0.2);
    --accent-blue-border: rgba(0, 111, 163, 0.3);
    --accent-blue-border-light: rgba(0, 111, 163, 0.2);
    --accent-orange-bg: rgba(163, 90, 14, 0.08);
    --accent-orange-bg-strong: rgba(163, 90, 14, 0.12);
    --accent-orange-border: rgba(163, 90, 14, 0.2);
    --accent-orange-border-strong: rgba(163, 90, 14, 0.3);
    --accent-orange-border-stronger: rgba(163, 90, 14, 0.4);
    --accent-red-bg: rgba(180, 45, 49, 0.08);
    --accent-red-bg-strong: rgba(180, 45, 49, 0.1);
    --accent-red-bg-stronger: rgba(180, 45, 49, 0.15);
    --accent-red-border: rgba(180, 45, 49, 0.3);
    --accent-purple-bg: rgba(114, 48, 117, 0.08);
    --accent-purple-bg-strong: rgba(114, 48, 117, 0.12);

    /* Register flash (CPU debugger change highlight) */
    --reg-flash-color: #8A6200;
    --reg-flash-bg: rgba(138, 98, 0, 0.15);

    /* Editor container (BASIC program window) */
    --editor-bg: rgba(246, 248, 250, 0.8);
    --editor-focus-border: rgba(58, 125, 41, 0.5);
    --editor-focus-shadow: rgba(58, 125, 41, 0.1);
    --editor-placeholder: rgba(58, 125, 41, 0.4);
    --editor-linenum: #656d76;
    --editor-var: #B42D31;

    /* Flag glow (CPU debugger active flags) */
    --flag-active-glow: rgba(58, 125, 41, 0.2);

    /* Miscellaneous */
    --badge-dim-bg: rgba(139, 148, 158, 0.15);
    --badge-dim-border: rgba(139, 148, 158, 0.25);
    --irq-dim-bg: rgba(139, 148, 158, 0.1);
    --irq-dim-border: rgba(139, 148, 158, 0.2);
    --muted-bg: rgba(139, 148, 158, 0.15);
    --reference-border: rgba(31, 35, 40, 0.08);
    --body-gradient-end: #f0f3f6;

    /* Canvas drawing backgrounds */
    --canvas-bg: #f0f2f5;
    --canvas-line: #d0d7de;

    /* Disk surface rendering */
    --disk-bg: #e8ecf0;
    --disk-medium: #3a2f1a;
    --disk-sector-line: rgba(255, 255, 255, 0.25);
    --disk-ghost-outline: rgba(0, 0, 0, 0.1);
    --disk-ghost-sector: rgba(0, 0, 0, 0.06);
    --disk-ghost-hub: rgba(210, 208, 200, 0.4);
    --disk-hub-ring: rgba(210, 208, 200, 0.95);
    --disk-hub-edge: rgba(0, 0, 0, 0.12);
    --disk-hub-edge-inner: rgba(0, 0, 0, 0.08);
    --disk-hole-edge: rgba(0, 0, 0, 0.2);
    --disk-edge: rgba(0, 0, 0, 0.1);
    --disk-label-color: rgba(0, 0, 0, 0.4);

    /* Reminder backgrounds */
    --reminder-bg-start: #dbeafe;
    --reminder-bg-end: #eff6ff;

    /* Syntax highlighting (light theme - Apple logo palette) */
    --syntax-flow: #B42D31;
    --syntax-load: #3A7D29;
    --syntax-math: #A35A0E;
    --syntax-stack: #723075;
    --syntax-flag: #006FA3;
    --syntax-data: #656d76;
    --syntax-comment: #656d76;
    --syntax-number: #006FA3;
    --syntax-keyword: #006FA3;
    --syntax-string: #3A7D29;
    --syntax-operator: #723075;
    --syntax-register: #3A7D29;
    --syntax-addr: #656d76;
    --syntax-separator: #afb8c1;
    --syntax-hex-byte: #006FA3;
    --syntax-hex-zero: #afb8c1;
    --syntax-hex-printable: #3A7D29;
    --syntax-hex-highbit: #723075;
    --syntax-ascii-printable: #A35A0E;
    --syntax-ascii-dot: #afb8c1;
    --syntax-ascii-separator: #afb8c1;
    --syntax-flow-bright: #3A7D29;
    --syntax-const: #723075;
    --syntax-const-bright: #5A2560;
    --syntax-symbol-zp: #3A7D29;
    --syntax-symbol-sw: #A35A0E;
    --syntax-symbol-disk: #8A6200;
    --syntax-symbol-rom: #006FA3;
    --syntax-symbol-basic: #723075;
    --syntax-symbol-vec: #B42D31;
    --syntax-symbol-io: #0087C2;
    --syntax-symbol-zp-bright: #2C6020;
    --syntax-symbol-sw-bright: #7E450B;
    --syntax-symbol-disk-bright: #6A4D00;
    --syntax-symbol-rom-bright: #005680;
    --syntax-symbol-basic-bright: #5A2560;
    --syntax-symbol-vec-bright: #8E2226;
    --syntax-symbol-io-bright: #00689A;

    /* Memory browser */
    --mem-byte: #006FA3;
    --mem-zero: #afb8c1;
    --mem-printable: #3A7D29;
    --mem-highbit: #723075;
    --mem-ascii: #A35A0E;
    --mem-addr: #656d76;
    --mem-separator: #afb8c1;
    --mem-scrollbar-thumb: rgba(0, 111, 163, 0.3);
    --mem-scrollbar-thumb-hover: rgba(0, 111, 163, 0.5);
}

/* Utility classes */
.hidden {
    display: none !important;
}

html {
    font-size: 16px;
}

body {
    font-family: var(--font-sans);
    background: linear-gradient(135deg, var(--bg-dark) 0%, var(--body-gradient-end) 100%);
    color: var(--text-primary);
    min-height: 100vh;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

#app {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Scrollbar styling */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-dark);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: var(--border-default);
    border-radius: 4px;
}

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

/* Firefox scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--border-default) var(--bg-dark);
}