/* ============================================
   DataLink v01 — Dark Theme (Default)
   Near-black with Data Link green accents
   ============================================ */

:root {
    --bg-base:      #0c0c0e;
    --bg-surface:   #141416;
    --bg-elevated:  #1c1c1f;
    --bg-hover:     #252528;
    --bg-active:    #2d2d30;
    --bg-overlay:   rgba(0, 0, 0, 0.6);

    --border-subtle:  #2a2a2e;
    --border-default: #3a3a3f;
    --border-strong:  #4a4a50;
    --border-focus:   #00d26a;

    --text-primary:   #f5f5f0;
    --text-secondary: #a0a098;
    --text-muted:     #6b6b65;
    --text-inverse:   #0c0c0e;

    --accent:         #00d26a;
    --accent-dim:     #00b35a;
    --accent-bright:  #2ee882;
    --accent-subtle:  rgba(0, 210, 106, 0.12);

    /* ---- RGB-channel companions ---- */
    /* These exist so the Tailwind palette in templates/base.html can use
       rgb(var(--xxx-rgb) / <alpha-value>) and respect both opacity
       modifiers (text-green-700/80) AND theme switches. Format is the
       three space-separated channel values WITHOUT rgb() wrapper, per the
       Tailwind 3 documented pattern. Update both this and theme-light.css
       in lockstep when adding a new palette slot. */
    --bg-base-rgb:         12 12 14;
    --bg-surface-rgb:      20 20 22;
    --bg-elevated-rgb:     28 28 31;
    --border-subtle-rgb:   42 42 46;
    --border-default-rgb:  58 58 63;
    --text-secondary-rgb:  160 160 152;
    --text-muted-rgb:      107 107 101;
    --accent-rgb:          0 210 106;
    --accent-dim-rgb:      0 179 90;
    --accent-bright-rgb:   46 232 130;

    --shadow-sm:    0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md:    0 4px 12px rgba(0, 0, 0, 0.5);
    --shadow-lg:    0 12px 32px rgba(0, 0, 0, 0.6);
    --shadow-glow:  0 0 20px rgba(0, 210, 106, 0.15);

    /* Accent glow — single source for focus/hover glows (was scattered
       rgba literals through app.css). Keep in lockstep with theme-light. */
    --accent-glow:       rgba(0, 210, 106, 0.35);
    --shadow-accent-sm:  0 0 0 3px rgba(0, 210, 106, 0.18);

    /* Code syntax colors (highlight.js, mapped in app.css) — matrix-leaning */
    --code-keyword:  #2ee882;
    --code-string:   #7dd3fc;
    --code-number:   #fbbf24;
    --code-comment:  #6b6b65;
    --code-title:    #5eead4;
    --code-attr:     #c4b5fd;

    /* Glass morphism tokens */
    /* Mesh dialed back ~30% (ui-v2): darker base + brighter accents reads
       sharper than color fog under text. */
    --glass-mesh-1:       rgba(0, 210, 106, 0.09);
    --glass-mesh-2:       rgba(0, 100, 255, 0.055);
    --glass-mesh-3:       rgba(100, 60, 200, 0.035);
    --glass-header-bg:    rgba(14, 14, 18, 0.88);
    --glass-header-border: rgba(255, 255, 255, 0.05);
    --glass-header-glow:  rgba(0, 210, 106, 0.12);
    --glass-panel-bg:     rgba(14, 14, 18, 0.75);
    --glass-panel-border: rgba(255, 255, 255, 0.04);
    --glass-panel-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
    --glass-nav-text:     rgba(255, 255, 255, 0.4);
    --glass-nav-hover-text: rgba(255, 255, 255, 0.8);
    --glass-nav-hover-bg: rgba(255, 255, 255, 0.05);
    --glass-nav-active-bg: rgba(0, 210, 106, 0.1);
    --glass-nav-active-border: rgba(0, 210, 106, 0.15);
    --glass-user-hover-bg: rgba(255, 255, 255, 0.04);
    --glass-user-hover-border: rgba(255, 255, 255, 0.06);
    --glass-avatar-bg:    rgba(0, 210, 106, 0.12);
    --glass-avatar-border: rgba(0, 210, 106, 0.2);
    --glass-user-name:    rgba(255, 255, 255, 0.85);
    --glass-user-role:    rgba(255, 255, 255, 0.3);
    --glass-icon-color:   rgba(255, 255, 255, 0.35);
    --glass-icon-hover-bg: rgba(255, 255, 255, 0.06);
    --glass-icon-hover-border: rgba(255, 255, 255, 0.08);
}