/**
 * Sketchfy — Dark Theme
 *
 * CSS custom properties for the dark colour scheme. Applied when the
 * document root carries `data-sf-theme="dark"`.
 *
 * @package   Sketchfy/Themes
 * @version   0.2-alpha
 * @author    Julio Marchi <jcmarchi@qlinnovations.com>
 * @copyright Quantum Leap Innovations (https://www.qlinnovations.com)
 * @link      https://www.sketchfy.com
 * @license   Proprietary, Exclusive
 */

html[data-sf-theme="dark"] {

    /* ── Backgrounds ─────────────────────────────────────────────── */
    --sf-bg-workspace:      #1a1a2e;
    --sf-bg-surface:        #262637;
    --sf-bg-surface-raised: #2e2e42;
    --sf-bg-canvas:         #2a2a3c;
    --sf-bg-input:          #1e1e2e;
    --sf-bg-hover:          rgba(255, 255, 255, 0.06);
    --sf-bg-active:         rgba(255, 255, 255, 0.10);
    --sf-bg-selected:       rgba(74, 108, 247, 0.15);

    /* ── Borders ─────────────────────────────────────────────────── */
    --sf-border-color:       #363649;
    --sf-border-color-light: #2e2e42;
    --sf-border-color-focus: #4a6cf7;

    /* ── Text ────────────────────────────────────────────────────── */
    --sf-text-color:     #d4d4e0;
    --sf-text-secondary: #a0a3b1;
    --sf-text-muted:     #6b7280;
    --sf-text-disabled:  #4a4a5a;
    --sf-text-inverse:   #1a1a2e;

    /* ── Accent / Brand ──────────────────────────────────────────── */
    --sf-accent:          #4a6cf7;
    --sf-accent-hover:    #5b7bf8;
    --sf-accent-active:   #3a5ce6;
    --sf-accent-bg:       rgba(74, 108, 247, 0.15);
    --sf-accent-gradient: linear-gradient(135deg, #4a6cf7, #6e3adb);

    /* ── Status ──────────────────────────────────────────────────── */
    --sf-success: #34d399;
    --sf-warning: #fbbf24;
    --sf-danger:  #ef4444;
    --sf-info:    #60a5fa;

    /* ── Shadows ─────────────────────────────────────────────────── */
    --sf-shadow-sm:       0 1px 3px rgba(0, 0, 0, 0.30);
    --sf-shadow-md:       0 4px 12px rgba(0, 0, 0, 0.40);
    --sf-shadow-lg:       0 8px 24px rgba(0, 0, 0, 0.50);
    --sf-shadow-dropdown: 0 6px 20px rgba(0, 0, 0, 0.50);

    /* ── Scrollbar ───────────────────────────────────────────────── */
    --sf-scrollbar-bg:          transparent;
    --sf-scrollbar-thumb:       rgba(255, 255, 255, 0.12);
    --sf-scrollbar-thumb-hover: rgba(255, 255, 255, 0.22);
}