/*
 * ============================================================================
 * CornerCutter Brand Color Palette
 * ============================================================================
 * Centralized color variables for easy maintenance and consistent theming.
 * 
 * COLOR MEANINGS:
 * - Near-Black (#0F172A): App background, frames the tool, reduces glare
 * - Dark Grey (#1E293B): Canvas/working surface background
 * - Muted Grey (#475569): Secondary elements, default borders
 * - Accent Blue (#3B82F6): Primary actions, flow direction indicators
 * - Accent Purple (#8B5CF6): AI/intelligence features (future use)
 * - UI White (#F1F5F9): Primary text, high contrast elements
 * - Secondary Text (#94A3B8): Labels, secondary information
 * ============================================================================
 */

:root {
    /* ========== Core Palette ========== */
    --color-near-black: #0F172A;
    --color-dark-grey: #1E293B;
    --color-muted-grey: #475569;
    --color-accent-blue: #3B82F6;
    --color-accent-purple: #8B5CF6;
    --color-ui-white: #F1F5F9;
    --color-secondary-text: #94A3B8;

    /* ========== Derived Colors ========== */
    --color-accent-blue-hover: #60A5FA;      /* Slightly brighter blue for hover */
    --color-accent-blue-active: #2563EB;     /* Slightly darker blue for active/pressed */
    --color-accent-blue-muted: rgba(59, 130, 246, 0.75);  /* Feed-OUT nodes */
    --color-accent-blue-glow: rgba(59, 130, 246, 0.25);   /* Selection glow */
    
    /* ========== Canvas Grid ========== */
    --color-grid-subtle: rgba(241, 245, 249, 0.04);

    /* ========== App Background & Canvas ========== */
    --bg-app: var(--color-near-black);
    --bg-canvas: var(--color-dark-grey);
    --border-canvas: var(--color-dark-grey);

    /* ========== Header/Top Bar ========== */
    --bg-header: var(--color-near-black);
    --border-header: var(--color-dark-grey);
    --text-header-title: var(--color-ui-white);

    /* ========== Buttons - Primary ========== */
    --btn-primary-bg: var(--color-accent-blue);
    --btn-primary-text: var(--color-ui-white);
    --btn-primary-bg-hover: var(--color-accent-blue-hover);
    --btn-primary-bg-active: var(--color-accent-blue-active);

    /* ========== Buttons - Secondary ========== */
    --btn-secondary-bg: var(--color-dark-grey);
    --btn-secondary-border: var(--color-accent-blue);
    --btn-secondary-text: var(--color-accent-blue);

    /* ========== Buttons - Destructive ========== */
    --btn-destructive-bg: var(--color-dark-grey);
    --btn-destructive-border: var(--color-muted-grey);
    --btn-destructive-text: var(--color-muted-grey);

    /* ========== Buttons - Active/Toggle State ========== */
    --btn-active-bg: var(--color-accent-blue);
    --btn-active-text: var(--color-ui-white);

    /* ========== Buttons - Disabled ========== */
    --btn-disabled-bg: var(--color-dark-grey);
    --btn-disabled-text: var(--color-muted-grey);
    --btn-disabled-opacity: 0.5;

    /* ========== Nodes ========== */
    --node-bg: var(--color-dark-grey);
    --node-border: var(--color-muted-grey);
    --node-text-title: var(--color-ui-white);
    --node-text-notes-label: var(--color-muted-grey);
    --node-text-notes: var(--color-secondary-text);

    /* ========== Node States ========== */
    --node-selected-border: var(--color-accent-blue);
    --node-selected-glow: var(--color-accent-blue-glow);
    --node-hover-border: var(--color-secondary-text);
    --node-editing-border: var(--color-accent-blue);

    /* ========== Feed Nodes ========== */
    --node-feed-in-border: var(--color-accent-blue);
    --node-feed-out-border: var(--color-accent-blue-muted);

    /* ========== Edges/Arrows ========== */
    --edge-default-stroke: var(--color-muted-grey);
    --edge-selected-stroke: var(--color-accent-blue);
    --edge-ai-stroke: var(--color-accent-purple);

    /* ========== Info Bar ========== */
    --info-bg: var(--color-dark-grey);
    --info-border: var(--color-muted-grey);
    --info-text: var(--color-ui-white);
    --info-link-mode-border: var(--color-accent-blue);
    --info-selected-border: var(--color-accent-blue);

    /* ========== Text Hierarchy ========== */
    --text-primary: var(--color-ui-white);
    --text-secondary: var(--color-secondary-text);
    --text-placeholder: rgba(148, 163, 184, 0.6);

    /* ========== Editor Inputs ========== */
    --editor-bg: var(--color-dark-grey);
    --editor-border: var(--color-accent-blue);
    --editor-text: var(--color-ui-white);
}