/*
 * Single source of truth for the project's color palette (light + dark).
 * Every template reads its theme variables from here — to change the
 * palette project-wide, edit only this file.
 *
 * Structure:
 *   Layer 1: Color Palette (base colors)
 *   Layer 2: Component Colors (UI element colors)
 *
 * Templates keep their own local variable names (--bg, --txt, --brand, ...)
 * for backward compatibility with existing CSS rules, but those local
 * variables are defined as aliases of the canonical --color-* tokens below.
 */

/* ============================================
   LAYER 1: COLOR PALETTE - Base Colors
   ============================================ */

:root[data-theme="dark"] {
    /* Backgrounds */
    --color-bg: #222221;
    --color-bg2: #1f1f1e;
    --color-bg3: #2c2c2b;
    --color-bg4: #2f2826;

    /* Borders */
    --color-border: #292925;

    /* Text */
    --color-text: #efefef;
    --color-text2: #c9c9c8;
    --color-text3: #9e9d92;
    --color-text4: #969696;

    /* Icons */
    --color-icon: #efefef;
    --color-icon2: #c9c9c8;
    --color-icon3: #272726;

    /* Brand */
    --color-brand: #e6644a;
    --color-brand-hover: #d4563d;

    /* Main Background (alias for main page background) */
    --color-mainbg: #222221;

    /* Primary (alias for brand - used in markdown body links) */
    --color-primary: #e6644a;

    /* Status Colors */
    --color-success: #349155;
    --color-error: #ff5555;
    --color-warning: #f5d167;

    /* Other */
    --color-overlay: #00000033;
    --color-link: #6870ff;

    /* Brand Variants */
    --color-text-on-brand: #ffffff;
    --color-icon-on-brand: #ffffff;
    --color-bg-brand: #e6644a;
    --color-icon-brand: #e6644a;
    --color-text-brand: #e6644a;

    /* Code Block Colors */
    --color-code-bg: #1a1a1a;
    --color-code-text: #d4d4d4;
    --color-code-keyword: #569cd6;
    --color-code-string: #ce9178;
    --color-code-comment: #6a9955;

    /* UI Accent Colors */
    --color-success-light: #4CAF50;
    --color-success-dark: #3d8b40;
    --color-warning-light: #FF9800;
    --color-warning-dark: #e68900;
    --color-error-light: #f44336;
    --color-purple: #9C27B0;
    --color-green-accent: #27c93f;

    /* Neutral UI Colors */
    --color-ui-bg-dark: #1b1b1b;
    --color-ui-bg-card: #1e1e1e;
    --color-ui-bg-input: #2d2d2d;
    --color-ui-border-dark: #333;
    --color-ui-border-medium: #444;
    --color-ui-text-muted: #aaa;
    --color-ui-text-dim: #777;
    --color-ui-text-light: #ddd;
    --color-ui-text-placeholder: #666;
    --color-ui-white: #ffffff;
    --color-ui-black: #000000;
    --color-ui-hover: #f0f0f0;

    /* Window Control Colors */
    --color-window-close: #ff5f56;
    --color-window-minimize: #ffbd2e;
    --color-window-maximize: #27c93f;

    /* Gradient Colors */
    --color-gradient-green-start: #4CAF50;
    --color-gradient-green-end: #8BC34A;
    --color-gradient-orange-start: #FF6B35;
    --color-gradient-orange-end: #ff8c5a;
}

:root[data-theme="light"] {
    /* Backgrounds */
    --color-bg: #ffffff;
    --color-bg2: #f8f8f6;
    --color-bg3: #e9e9e2;
    --color-bg4: #f6ebe9;

    /* Borders */
    --color-border: #edece2;

    /* Text */
    --color-text: #444436;
    --color-text2: #86857a;
    --color-text3: #aaa79c;
    --color-text4: #efefef;

    /* Icons */
    --color-icon: #2d2d29;
    --color-icon2: #918f87;
    --color-icon3: #f2f2f2;

    /* Brand */
    --color-brand: #e6644a;
    --color-brand-hover: #d15a41;

    /* Main Background (alias for main page background) */
    --color-mainbg: #ffffff;

    /* Primary (alias for brand - used in markdown body links) */
    --color-primary: #e6644a;

    /* Status Colors */
    --color-success: #53a871;
    --color-error: #ff5555;
    --color-warning: #d8b448;

    /* Other */
    --color-overlay: #00000033;
    --color-link: #4951e4;

    /* Brand Variants */
    --color-text-on-brand: #ffffff;
    --color-icon-on-brand: #ffffff;
    --color-bg-brand: #e6644a;
    --color-icon-brand: #e6644a;
    --color-text-brand: #e6644a;

    /* Code Block Colors */
    --color-code-bg: #f5f5f5;
    --color-code-text: #333333;
    --color-code-keyword: #0000ff;
    --color-code-string: #a31515;
    --color-code-comment: #008000;

    /* UI Accent Colors */
    --color-success-light: #53a871;
    --color-success-dark: #3d8b40;
    --color-warning-light: #FF9800;
    --color-warning-dark: #e68900;
    --color-error-light: #f44336;
    --color-purple: #9C27B0;
    --color-green-accent: #27c93f;

    /* Neutral UI Colors */
    --color-ui-bg-dark: #f8f8f6;
    --color-ui-bg-card: #ffffff;
    --color-ui-bg-input: #ffffff;
    --color-ui-border-dark: #ddd;
    --color-ui-border-medium: #ccc;
    --color-ui-text-muted: #86857a;
    --color-ui-text-dim: #aaa;
    --color-ui-text-light: #555;
    --color-ui-text-placeholder: #999;
    --color-ui-white: #ffffff;
    --color-ui-black: #000000;
    --color-ui-hover: #f0f0f0;

    /* Window Control Colors */
    --color-window-close: #ff5f56;
    --color-window-minimize: #ffbd2e;
    --color-window-maximize: #27c93f;

    /* Gradient Colors */
    --color-gradient-green-start: #4CAF50;
    --color-gradient-green-end: #8BC34A;
    --color-gradient-orange-start: #FF6B35;
    --color-gradient-orange-end: #ff8c5a;
}

/* ============================================
   LAYER 2: COMPONENT COLORS - UI Elements
   ============================================ */

:root[data-theme="dark"] {
    /* Component: Mode 1 (Dark) */
    --component-bg-sidebar: #1f1f1e;
    --component-bg-main: #222221;
    --component-bg-input: #222221;
    --component-bg-button: #e6644a;
    --component-bg-button-secondary: #2f2826;
    --component-fg-button: #ffffff;
    --component-fg-button-secondary: #e6644a;
}

:root[data-theme="light"] {
    /* Component: Mode 1 (Light) */
    --component-bg-sidebar: #ffffff;
    --component-bg-main: #f8f8f6;
    --component-bg-input: #ffffff;
    --component-bg-button: #e6644a;
    --component-bg-button-secondary: #f6ebe9;
    --component-fg-button: #ffffff;
    --component-fg-button-secondary: #e6644a;
}