/* Design Tokens - All :root variable declarations live here.
   No selectors, no component styles, no layout. Only tokens. */

:root {
    /* Font Stacks */
    --font-mono: 'JetBrains Mono', 'SF Mono', 'Monaco', 'Fira Code', 'Consolas', monospace;

    /* Typography */
    --font-size-xs: 10px;
    --font-size-sm: 11px;
    --font-size-md: 13px;
    --font-size-lg: 14px;

    /* Spacing */
    --gap: 7px;
    --panel-padding-sm: 8px 12px;
    --panel-padding-md: 12px 16px;
    --panel-padding-lg: 16px 20px;

    /* Borders */
    --panel-border: 1px solid var(--border);
    --border-radius: 3px;
    --border-radius-lg: 7px;

    /* Core Colors */
    --text-primary: #333433;
    --text-secondary: #656766;
    --text-tertiary: #989a99;
    --text-emphasis: #000; /* Headings, titles, high-contrast text */
    --bg-primary: #fcffff;
    --bg-almost-white: #f7f9f8;
    --bg-hover: #f0f1f1;
    --bg-gray: #999;
    --bg-dark: #202523;
    --border: #dcdedd;
    --border-light: #dfe1e0;
    --border-divider: #eee; /* Subtle dividers within panels */
    --accent-color: #5a9a6a;
    --accent-hover: #4a8559;

    /* Dark mode colors - for dark backgrounds */
    --bg-almost-black: #1a1b1a; /* Like system drawer */
    --text-on-dark: #dfe1e0; /* Primary text on dark */
    --text-on-dark-secondary: #a9abaa; /* Secondary text on dark */
    --text-on-dark-tertiary: #868787; /* Tertiary text on dark, muted labels */
    --text-on-dark-emphasis: #fefffe; /* Headings/emphasis on dark */
    --bg-dark-hover: #2a2b2a; /* Hover state on dark backgrounds */
    --bg-canvas: #2d2e36; /* Canvas workspace background — slight cool tint */
    --bg-dark-light: #343534; /* Lighter dark surface - buttons, inputs, controls */
    --bg-secondary: #252625; /* Dark surface - glyph bodies, canvas panels */
    --bg-tertiary: #2e2f2e; /* Slightly lighter dark surface - title bars, headers */
    --border-on-dark: #3f4140; /* Borders on dark backgrounds */
    --accent-on-dark: #7dba8a; /* Accent/links on dark backgrounds */
    --accent-on-dark-hover: #9acca5; /* Accent hover on dark backgrounds */

    /* Status Colors */
    --color-success: #22c65e;
    --color-error: #ef4544;
    --color-warning: #ffab00;
    --color-info: #3b83f6;
    --color-scheduled: #7b20a2;

    /* Glyph Status Colors - dark-bg tints for lifecycle states */
    --glyph-status-idle-bg: rgba(30, 30, 35, 0.92);
    --glyph-status-idle-section-bg: var(--bg-tertiary);
    --glyph-status-idle-text: var(--text-on-dark);
    --glyph-status-pending-bg: rgba(42, 43, 61, 0.92);
    --glyph-status-pending-section-bg: rgba(42, 43, 61, 0.92);
    --glyph-status-pending-text: #8b8fd1;
    --glyph-status-running-bg: #1f2a3d;
    --glyph-status-running-section-bg: #1a2332;
    --glyph-status-running-text: #6b9bd1;
    --glyph-status-success-bg: #1f3d1f;
    --glyph-status-success-section-bg: #1a2b1a;
    --glyph-status-success-text: #a8e6a1;
    --glyph-status-error-bg: #3d1f1f;
    --glyph-status-error-section-bg: #2b1a1a;
    --glyph-status-error-text: #ff6b6b;

    /* Accent Colors */
    --accent-lavender: #d4b8ff;

    /* Box Shadows */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.2);
    --shadow-xl: 0 4px 16px rgba(0, 0, 0, 0.4);

    /* Scrollbar Colors */
    --scrollbar-light-thumb-hover: #bbb;
    --scrollbar-dark-thumb: #3a3a3a;
    --scrollbar-dark-thumb-hover: #4a4a4a;

    /* Connectivity Mode Switching - Online mode (default) */
    --mode-glyph-saturation: 100%;
    --mode-glyph-hue: 0deg;
    --mode-glyph-border-opacity: 1.0;
    --mode-transition-duration: 1.5s;
    --mode-transition-timing: cubic-bezier(0.4, 0.0, 0.2, 1);

    /* Panel aliases (reference core tokens above) */
    --panel-bg: var(--bg-primary);
    --panel-bg-secondary: var(--bg-almost-white);
    --panel-text-primary: var(--text-primary);
    --panel-text-secondary: var(--text-secondary);
    --panel-text-tertiary: var(--text-tertiary);

    /* Transitions */
    --panel-transition: all 0.2s ease;

    /* Status badge colors (light-bg variants for panels) */
    --status-pending-bg: #fff3e0;
    --status-pending-text: var(--color-warning);
    --status-running-bg: #e3f2fd;
    --status-running-text: var(--color-info);
    --status-completed-bg: #e8f5e9;
    --status-completed-text: var(--color-success);
    --status-failed-bg: #ffebee;
    --status-failed-text: var(--color-error);
    --status-paused-text: #ef6c00;
    --status-stopped-text: #757575;
    --status-scheduled-bg: #f3e5f5;

    /* Editor colors (shared dark theme for code editors) */
    --editor-bg: var(--bg-dark);
    --editor-text: #cccccc;
    --editor-code-bg: var(--bg-dark);
    --status-success: #4ec9b0;
    --status-error: #f48771;

    /* Breakpoint documentation (can't use in @media, but documents standards) */
    --breakpoint-mobile: 768px;
    --breakpoint-tablet: 900px;
    --breakpoint-desktop: 1200px;
}

/* Offline Mode - Less saturated with azure-ish (blue/green) tint */
:root[data-connectivity-mode="offline"] {
    --mode-glyph-saturation: 65%;
    --mode-glyph-hue: 10deg;
    --mode-glyph-border-opacity: 0.35;
}