/**
 * Sketchfy — Light Theme
 *
 * CSS custom properties for the light colour scheme. Applied when the
 * document root carries `data-sf-theme="light"`.
 *
 * @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="light"] {

    /* ── Backgrounds ─────────────────────────────────────────────── */
    --sf-bg-workspace:      #f0f0f3;
    --sf-bg-surface:        #ffffff;
    --sf-bg-surface-raised: #f8f8fa;
    --sf-bg-canvas:         #e8e8ed;
    --sf-bg-input:          #ffffff;
    --sf-bg-hover:          rgba(0, 0, 0, 0.04);
    --sf-bg-active:         rgba(0, 0, 0, 0.08);
    --sf-bg-selected:       rgba(74, 108, 247, 0.10);

    /* ── Borders ─────────────────────────────────────────────────── */
    --sf-border-color:       #d1d5db;
    --sf-border-color-light: #e5e7eb;
    --sf-border-color-focus: #4a6cf7;

    /* ── Text ────────────────────────────────────────────────────── */
    --sf-text-color:     #1f2937;
    --sf-text-secondary: #4b5563;
    --sf-text-muted:     #9ca3af;
    --sf-text-disabled:  #d1d5db;
    --sf-text-inverse:   #ffffff;

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

    /* ── Status ──────────────────────────────────────────────────── */
    --sf-success: #10b981;
    --sf-warning: #f59e0b;
    --sf-danger:  #ef4444;
    --sf-info:    #3b82f6;

    /* ── Shadows ─────────────────────────────────────────────────── */
    --sf-shadow-sm:       0 1px 3px rgba(0, 0, 0, 0.08);
    --sf-shadow-md:       0 4px 12px rgba(0, 0, 0, 0.10);
    --sf-shadow-lg:       0 8px 24px rgba(0, 0, 0, 0.15);
    --sf-shadow-dropdown: 0 6px 20px rgba(0, 0, 0, 0.12);

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