/**
 * DESIGN SYSTEM TOKENS (SSOT)
 * Project: Quick Editor app_v2
 * 
 * This file contains the foundational values (tokens) for the entire project.
 * All styling should derive from these variables to ensure consistency.
 */

@import url('https://fonts.googleapis.com/css2?family=Kufam:ital,wght@0,400..900;1,400..900&display=swap');

:root {
    /* --- COLOR PALETTE (Base) --- */
    --clr-primary: #3cd1aa;
    --clr-primary-hover: #2eb896;
    --clr-primary-soft: rgba(60, 209, 170, 0.1);

    /* --- LIVE PREVIEW SSOT DEFAULTS --- */
    --live-primary: #3cd1aa;
    --live-secondary: #1a202c;
    --live-bg: #F4F4F4;
    --live-text: #111827;
    --live-font: 'Kufam', sans-serif;
    --live-font-size: 16px;
    --live-radius: 12px;
    --live-opacity: 1;
    
    --clr-danger: #ef4444;
    --clr-danger-rgb: 239, 68, 68;
    --clr-danger-light: #fc8181;
    --clr-success: #3cd1aa;
    --clr-warning: #f59e0b;
    --clr-warning-rgb: 245, 158, 11;
    --clr-primary-rgb: 60, 209, 170;
    
    /* --- ACCENT PALETTE (SSOT) --- */
    --clr-accent-blue: #3b82f6;
    --clr-accent-green: #10b981;
    --clr-accent-purple: #8b5cf6;
    
    --clr-accent-blue-soft: rgba(59, 130, 246, 0.1);
    --clr-accent-green-soft: rgba(16, 185, 129, 0.1);
    --clr-accent-purple-soft: rgba(139, 92, 246, 0.1);

    --clr-white: #ffffff;
    --clr-black: #0f1419;
    
    /* --- STUDIO / THEME TOKENS --- */
    --studio-bg: #1e252b;
    --studio-panel: rgba(46, 56, 65, 0.9);
    --studio-panel-light: rgba(255, 255, 255, 0.05);
    --studio-border: rgba(255, 255, 255, 0.1);
    --studio-text: #f8fafc;
    --studio-text-dim: #94a3b8;
    
    /* --- SEMANTIC TOKENS --- */
    --interactive-bg: var(--clr-primary);
    --interactive-text: var(--clr-white);
    --surface-main: var(--studio-bg);
    --surface-panel: var(--studio-panel);

    /* --- ADMIN LIGHT THEME (RESTORING LEGACY PARITY) --- */
    --surface-admin-bg: #e2e2e2;
    --surface-admin-card: var(--clr-white);
    --text-admin-main: #1f2937;
    --text-admin-dim: #64748b;
    --border-admin: rgba(0, 0, 0, 0.08);
    
    /* --- COMPONENT TOKENS (CONTEXT AWARE) --- */
    --panel-bg: var(--studio-panel);
    --panel-border: var(--studio-border);
    --panel-text: var(--studio-text);
    --input-text: var(--studio-text);

    /* --- MATERIAL SSOT (Glassmorphism) --- */
    --card-radius: 9px;
    --glass-bg: rgba(255, 255, 255, 0.9);
    --glass-blur: blur(25px);
    --glass-border: 1px solid rgba(255, 255, 255, 0.15);
    --glass-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    
    /* Avatar Character Tokens */
    --avatar-icon-color: #999;
    --avatar-icon-size: 1.2rem;
    --avatar-shell-size: 100px;

    /* --- LAYOUT DNA (SSOT) --- */
    --p-section-gap: 4rem;      /* Vertical space between sections */
    --p-floating-margin: 4em;   /* Horizontal floating margin for cards */


    /* --- TYPOGRAPHY --- */
    --font-main: 'Kufam', 'Segoe UI', system-ui, sans-serif;
    --base-font-size: 16px; /* THE SOURCE OF TRUTH FOR 1rem */
    
    /* --- SCALING & SPACING --- */
    /* 1rem = 16px. All spacing uses rem for responsive scaling. */
    --space-xs: 0.25rem;  /* 4px */
    --space-sm: 0.5rem;   /* 8px */
    --space-md: 1rem;     /* 16px */
    --space-lg: 1.5rem;   /* 24px */
    --space-xl: 2rem;     /* 32px */
    
    /* --- RADII --- */
    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-pill: 100vw;
    
    /* --- ELEVATION --- */
    --shadow-soft: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-glow: 0 0 15px var(--clr-primary-soft);
    
    /* --- CANVAS SPECIFIC --- */
    --canvas-scale: 1; /* Controlled via JS */
    /* --- MOTION ENGINE (Physics) --- */
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out-smooth: cubic-bezier(0.4, 0, 0.2, 1);

    --dur-fast: 150ms;
    --dur-smooth: 350ms;
    --dur-orchestrate: 600ms;

    /* --- ELEVATION SYSTEM (Z-Axis) --- */
    --z-0: none;
    --z-1: 0 2px 8px rgba(0,0,0,0.04);
    --z-2: 0 10px 30px rgba(0,0,0,0.08);
    --z-3: 0 20px 50px rgba(0,0,0,0.12);
    --z-4: 0 30px 70px rgba(0,0,0,0.18);

    /* --- SEMANTIC TYPOGRAPHY SCALE --- */
    --fs-display: 2.5rem;
    --fs-h1: 1.75rem;
    --fs-h2: 1.25rem;
    --fs-body: 1rem;
    --fs-caption: 0.85rem;
    
    --fw-bold: 800;
    --fw-semi: 600;
    --fw-main: 400;
}


/* --- ADMIN THEME OVERRIDE --- */
[lang="ar"][dir="rtl"] body:has(.admin-layout), 
.admin-main {
    --panel-bg: var(--clr-white);
    --panel-border: var(--border-admin);
    --panel-text: var(--text-admin-main);
    --input-bg: #f8fafc;
    --input-text: var(--text-admin-main);
}

/* Global resets using tokens */
html {
    font-size: var(--base-font-size);
    height: 100%;
}

body {
    font-family: var(--font-main);
    background-color: var(--surface-main);
    color: var(--studio-text);
    margin: 0;
    padding: 0;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}


/* --- Utility Classes --- */
.hidden { display: none !important; }

/* ── Mobile: glass performance fallbacks ─────────────────────────────
   Strategy: override the token variables themselves so every element
   that uses --glass-blur / --glass-bg gets the fix for free.

   1. prefers-reduced-motion  — user has asked for less animation/effect
   2. @supports not           — device genuinely can't render backdrop-filter
      (common on older Android WebView and low-end devices)
──────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    :root {
        --glass-blur:   blur(0px);
        --glass-bg:     rgba(255, 255, 255, 0.97);
        --glass-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    }
}

@supports not (backdrop-filter: blur(1px)) {
    :root {
        --glass-blur: blur(0px);
        --glass-bg:   rgba(255, 255, 255, 0.97);
    }
}