/* ==========================================================================
        COLOR PROFILES & DESIGN SYSTEM VARIABLES
        ========================================================================== */
/* 1. Graphite Default (Dark Industrial Mode) */
.theme-graphite {
    --bg-canvas: #18181b;
    --text-main: #e4e4e7;
    --text-muted: #a1a1aa;
    --border-schematic: #27272a;
    --accent-pulse: #6366F1; /* Premium Indigo */
    --accent-text: #ffffff;
    /* Canvas Sub-elements */
    --cnv-vertex-fill: #27272a;
    --cnv-filled-vertex-fill: #18181b;
    --cnv-fork-join-label-color: #6366F1;
}

/* 2. Monochrome Mode (High Contrast Light Architectural Mode) */
.theme-monochrome {
    --bg-canvas: #ffffff;
    --text-main: #18181b;
    --text-muted: #71717a;
    --border-schematic: #e4e4e7;
    --accent-pulse: #6366F1;
    --accent-text: #ffffff;
    /* Canvas Sub-elements */
    --cnv-vertex-fill: #f4f4f5;
    --cnv-filled-vertex-fill: #ffffff;
    --cnv-fork-join-label-color: #18181b;
}

/* ==========================================================================
        CORE LAYOUT & DESIGN UTILITIES
        ========================================================================== */
body {
    background-color: var(--bg-canvas);
    color: var(--text-main);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.border-schematic {
    border-color: var(--border-schematic) !important;
}

.text-muted-custom {
    color: var(--text-muted);
}

.accent-color {
    color: var(--accent-pulse);
}

.readable-prose {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.btn-pulse {
    background-color: var(--accent-pulse);
    color: var(--accent-text);
    transition: background-color 0.15s ease;
    cursor: pointer;
}

    .btn-pulse:hover {
        opacity: 0.9;
    }

/* Technical Schematic Background Grid Overlay */
.blueprint-grid {
    background-size: 24px 24px;
    transition: background-image 0.2s ease;
}

/* Increase contrast for Dark Mode */
.theme-graphite.blueprint-grid {
    /* Changed 0.04 to 0.1 for better visibility */
    background-image: linear-gradient(to right, rgba(228, 228, 231, 0.04) 1px, transparent 1px), linear-gradient(to bottom, rgba(228, 228, 231, 0.04) 1px, transparent 1px);
}

.theme-monochrome.blueprint-grid {
    background-image: linear-gradient(to right, rgba(24, 24, 27, 0.04) 1px, transparent 1px), linear-gradient(to bottom, rgba(24, 24, 27, 0.04) 1px, transparent 1px);
}

/* Mock Interactive State Blueprint Tokens */
.mock-vertex {
    background-color: var(--cnv-vertex-fill);
    border: 1.2px solid var(--text-main);
}

.mock-filled-vertex {
    background-color: var(--cnv-filled-vertex-fill);
    border: 1.2px solid var(--accent-pulse);
    color: var(--cnv-fork-join-label-color);
}

/* ==========================================================================
        DYNAMIC COMPONENT THEME TUNING (FLAT PARINGS)
        ========================================================================== */
.dynamic-title-light {
    color: #18181b !important;
}

.theme-graphite .dynamic-title-light {
    color: #e4e4e7 !important;
}

.theme-graphite .hero-canvas {
    background-color: rgba(0, 0, 0, 0.15) !important;
    backdrop-filter: none;
}

.theme-monochrome .hero-canvas {
    /* Lighter silver-gray base at 12% opacity */
    background-color: rgba(212, 212, 216, 0.12) !important;
    backdrop-filter: blur(1px);
}

.dynamic-pipeline-bg {
    background-color: #ffffff !important;
    border-color: #e4e4e7 !important;
}

.theme-graphite .dynamic-pipeline-bg {
    background-color: #18181b !important;
    border-color: #27272a !important;
}

.dynamic-pipeline-line {
    background-color: #e4e4e7 !important;
}

.theme-graphite .dynamic-pipeline-line {
    background-color: #27272a !important;
}

.no-grid-override {
    background-image: none !important;
    background-color: #ffffff !important;
}

.theme-graphite .no-grid-override {
    background-color: #18181b !important;
}

.bg-custom-toggle {
    background-color: #e4e4e7;
}

.theme-graphite .bg-custom-toggle {
    background-color: #27272a;
}

.bg-card-surface {
    background-color: rgba(24, 24, 27, 0.03);
}

.theme-graphite .bg-card-surface {
    background-color: rgba(0, 0, 0, 0.2);
}

.bg-code-badge {
    background-color: #f4f4f5;
    color: #27272a;
}

.theme-graphite .bg-code-badge {
    background-color: #18181b;
    color: #d4d4d8;
}

.badge-coming-soon {
    background-color: #f4f4f5;
    color: #71717a;
    border-color: #e4e4e7;
}

.theme-graphite .badge-coming-soon {
    background-color: rgba(63, 63, 70, 0.4);
    color: #a1a1aa;
    border-color: rgba(63, 63, 70, 0.6);
}

.contact-input {
    background-color: #ffffff;
    color: #18181b;
}

.theme-graphite .contact-input {
    background-color: #222225;
    color: #e4e4e7;
}

.dynamic-demo-bg {
    background-color: #ffffff !important;
    color: #18181b !important;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

    .dynamic-demo-bg:hover {
        background-color: #f4f4f5 !important;
        border-color: #a1a1aa !important;
    }

.theme-graphite .dynamic-demo-bg {
    background-color: rgba(39, 39, 42, 0.4) !important;
    color: #e4e4e7 !important;
}

    .theme-graphite .dynamic-demo-bg:hover {
        background-color: rgba(63, 63, 70, 0.6) !important;
        border-color: #52525b !important;
    }

.footer-bg {
    background: linear-gradient(180deg, #f5f7ff 0%, #ffffff 100%) !important;
}

.theme-graphite .footer-bg {
    background: #111113 !important;
}

.btn-contact-submit {
    background-color: transparent;
    color: #18181b;
    border-color: #e4e4e7;
    transition: all 0.15s ease;
}

    .btn-contact-submit:hover {
        background-color: #18181b;
        color: #ffffff;
        border-color: #18181b !important;
    }

.theme-graphite .btn-contact-submit {
    color: #e4e4e7;
    border-color: #27272a;
}

    .theme-graphite .btn-contact-submit:hover {
        background-color: #27272a;
        color: #ffffff;
        border-color: #3f3f46 !important;
    }

/* ==========================================================================
        PULSE SIMULATOR SYNTAX HIGHLIGHTING ENGINE (FLAT VALIDATED)
        ========================================================================== */
.pulse-container {
    background-color: #FFFFFF !important;
}

.theme-graphite .pulse-container {
    background-color: #1E1E1E !important;
}

.pulse-line-no {
    color: #a0a0a0;
    border-color: #e0e0e0;
}

.theme-graphite .pulse-line-no {
    color: #858585;
    border-color: #2d2d2d;
}

/* --- Light Theme Syntax Specifics --- */
.pulse-code {
    color: #000000;
}

    .pulse-code .keyword {
        color: #0000FF;
    }

    .pulse-code .control {
        color: #8F0075;
    }

    .pulse-code .class,
    .pulse-code .struct {
        color: #267F99;
    }

    .pulse-code .method {
        color: #74531F;
    }

    .pulse-code .comment {
        color: #008000;
        font-style: italic;
    }

    .pulse-code .numeric {
        color: #098658;
    }

    .pulse-code .localName,
    .pulse-code .parameter {
        color: #1F377F;
    }

    .pulse-code .punctuation,
    .pulse-code .operator,
    .pulse-code .namespace,
    .pulse-code .propertyName {
        color: #000000;
    }

/* --- Graphite (Dark Theme) Syntax Specifics --- */
.theme-graphite .pulse-code {
    color: #dfdfdf;
}

    .theme-graphite .pulse-code .keyword {
        color: #569cd6;
    }

    .theme-graphite .pulse-code .control {
        color: #C586C0;
    }

    .theme-graphite .pulse-code .class {
        color: #4EC9B0;
    }

    .theme-graphite .pulse-code .struct {
        color: #86C691;
    }

    .theme-graphite .pulse-code .method {
        color: #DCDCAA;
    }

    .theme-graphite .pulse-code .comment {
        color: #6A9955;
        font-style: normal;
    }

    .theme-graphite .pulse-code .numeric {
        color: #b5cea8;
    }

    .theme-graphite .pulse-code .localName,
    .theme-graphite .pulse-code .parameter {
        color: #9CDCFE;
    }

    .theme-graphite .pulse-code .punctuation,
    .theme-graphite .pulse-code .operator,
    .theme-graphite .pulse-code .namespace,
    .theme-graphite .pulse-code .propertyName {
        color: #dfdfdf;
    }