/* ===============================================================================
   VARIABLES.CSS - DevPanicZone
   ===============================================================================
   CSS Custom Properties / Variables (Design Tokens)
   Table of Contents
   -----------------
   1. ACCENT COLORS .....................  ~25
   2. DARK MODE (Standard) ..............  ~45
      2.1 Backgrounds
      2.2 Headings
      2.3 Text Colors
      2.4 Borders
      2.5 Status Colors
   3. FONTS .............................  ~70
   4. LIGHT MODE ........................  ~75
   5. PRISM.JS - LIGHT MODE OVERRIDES ... ~120

   =============================================================================== */

:root {

    /* ---- 1. ACCENT COLORS ---- */
    --accent-blue: #518fc9;
    --accent-blue-hover: #4c789e;
    --accent-blue-light: #77aae5;
    --accent-cyan: #4fc1e9;
    --accent-purple: #a96de0;
    --accent-purple-dark: #6d1db4;
    --accent-magenta: #cb5fd3;
    --accent-mint: #4ec9b0;
    --accent-green: #23bc7c;
    --accent-yellow: #cbd35c;
    --accent-yellow-light: #e5d691;
    --accent-yellow-normal: #ffc107;
    --accent-orange: #e4884a;
    /* --accent-red: #e94e4e; */
    --accent-red: #fe4f4f;
    --accent-red-dark: #d62e3f;
    --accent-red-light: #d85c43;
    --accent-blue-gray: #64748b;
    /* --accent-blue: #569cd6; */
    /* --accent-blue-hover: #4a8cc7; */

    /* ---- 2. DARK MODE (Default) ---- */
    --bg-primary: #141414;
    --bg-secondary: #222222;
    --bg-tertiary: #333333;
    --bg-light: #555555;
    --bg-body: #1c1c1c;
    --card-bg: #2a2a2a;

    --heading-primary: #5090c4;
    --heading-secondary: #9fb4c8;
    --heading-dark: #425268;

    --text-primary: #d2d2d2;
    --text-secondary: #b5b5b5;
    --text-tertiary: #b6b6b6;
    --text-muted: #999999;
    --text-code: #ccc;

    --border-color: #3e3e42;

    --color-success: #3dbb5a;
    /* --color-warning: #ffa407; */
    --color-warning: #d29346;
    --color-error: #dc3545;

    /* ---- 3. FONTS ---- */
    --font-body: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-heading: 'Fira Code', 'Courier New', monospace;
    --font-code: 'Fira Code', 'Courier New', monospace;
}

/* ---- 4. LIGHT MODE ---- */

[data-theme="light"] {

    --bg-primary: #ffffff;
    --bg-secondary: #f5f5f5;
    --bg-tertiary: #e8e8e8;
    --bg-body: #f0f0f0;
    --bg-light: #d0d0d0;
    --card-bg: #ffffff;

    --text-primary: #1e1e1e;
    --text-secondary: #444444;
    --text-tertiary: #555555;
    --text-muted: #666666;
    --text-code: #2e2e2e;

    /* Headings */
    --heading-primary: #1e6db1;
    --heading-secondary: #205b83;
    --heading-dark: #1e3a52;

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

    /* Accent Colors */
    --accent-blue: #1e6aaa;
    --accent-blue-hover: #1f5f99;
    --accent-blue-light: #335f85;
    --accent-green: #257b53;
    --accent-red: #cc2222;
    --accent-purple: #7040b0;
    --accent-orange: #e66800;
    --accent-yellow-normal: #ffc107;
    --accent-yellow-light: #f39a00;
    --accent-cyan: #0f7290;
    --accent-mint: #2a9a80;

    /* Status */
    --color-success: #1a7a3a;
    --color-warning: #a06010;
    --color-error: #cc2222;

}

/* ========================================
   5. PRISM.JS - LIGHT MODE OVERRIDES
   ======================================== */

[data-theme="light"] pre[class*=language-] {
    background: #f5f5f5;
    border-color: #cccccc;
}

[data-theme="light"] code[class*=language-],
[data-theme="light"] pre[class*=language-] {
    color: #2e2e2e;
}

[data-theme="light"] .token.comment,
[data-theme="light"] .token.block-comment,
[data-theme="light"] .token.prolog,
[data-theme="light"] .token.doctype,
[data-theme="light"] .token.cdata {
    color: #266e26;
}

[data-theme="light"] .token.tag {
    color: #1a5fa8;
}

[data-theme="light"] .token.function-name {
    color: #1a5fa8;
}

[data-theme="light"] .token.keyword,
[data-theme="light"] .token.atrule,
[data-theme="light"] .token.builtin,
[data-theme="light"] .token.selector {
    color: #7a28a0;
}

[data-theme="light"] .token.string,
[data-theme="light"] .token.char,
[data-theme="light"] .token.regex,
[data-theme="light"] .token.variable {
    color: #1a6b3a;
}

[data-theme="light"] .token.number,
[data-theme="light"] .token.boolean,
[data-theme="light"] .token.function {
    color: #a84400;
}

[data-theme="light"] .token.attr-name {
    color: #1a5fa8;
}

[data-theme="light"] .token.attr-value,
[data-theme="light"] .token.deleted {
    color: #a02020;
}

[data-theme="light"] .token.class-name,
[data-theme="light"] .token.constant,
[data-theme="light"] .token.property {
    color: #7a6000;
}

[data-theme="light"] .token.operator,
[data-theme="light"] .token.entity,
[data-theme="light"] .token.url {
    color: #1a6b6b;
}

[data-theme="light"] .token.inserted {
    color: #1a6b3a;
}

[data-theme="light"] .token.punctuation {
    color: #444444;
}

/* Bash overrides */
[data-theme="light"] .language-bash .token.function {
    color: #1a5fa8;
}

[data-theme="light"] .language-bash .token.parameter {
    color: #b84c00;
}

[data-theme="light"] .language-bash .token.builtin {
    color: #7a28a0;
}