/**
 * DESIGN SYSTEM TOKENS (SSOT)
 * Project: Quick Editor app_v2
 *
 * ╔══════════════════════════════════════════════════════════════════════════╗
 * ║  FORBIDDEN — DO NOT ADD NEW TOKENS                                      ║
 * ║                                                                          ║
 * ║  This file is the single source of truth. The token set is complete.    ║
 * ║  If you think you need a new token, you are wrong — find the right      ║
 * ║  existing token and use it. Adding tokens here pollutes the system,      ║
 * ║  creates drift, and breaks the SSOT contract.                            ║
 * ║                                                                          ║
 * ║  Raw values (hardcoded colors, px, rem, rgba, ms) are also forbidden     ║
 * ║  in any CSS file. Every value must reference a token from this file.     ║
 * ╚══════════════════════════════════════════════════════════════════════════╝
 */

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

:root {
    /* --clr-* prefix deprecated — all usages migrated to --color-* (2026-06-01) */

    /* --- SYSTEM COLOR SSOT (global semantic vocabulary) --- */
    --color-canvas-dark: #1e252b;
    --color-surface-dark-panel-mid: #323d4d;    /* mid-tone only — gradient midpoint */

    --color-surface-page: #eef4f7;
    --color-surface-card-tint-alt: #f8fbfd;
    --color-surface-card-muted: #f3f7fb;
    --color-surface-overlay-minimal: rgba(255, 255, 255, 0.02);
    --color-surface-overlay-low: rgba(255, 255, 255, 0.04);
    --color-surface-overlay-emphasis: rgba(255, 255, 255, 0.15);
    --color-surface-overlay-bold: rgba(255, 255, 255, 0.20);
    --color-surface-scrim: rgba(0, 0, 0, 0.50);
    --color-surface-scrim-soft: rgba(0, 0, 0, 0.20);
    --color-surface-accent-panel: rgba(11, 31, 26, 0.88);

    --color-text-primary: #334155;
    --color-text-secondary: #64748b;
    --color-text-tertiary: #94a3b8;
    --color-text-quaternary: #6b7a8f;
    --color-text-success: #0f513f;
    --color-text-on-accent-soft: #0b1f1a;
    --color-text-disabled: hsl(214, 12%, 63%);

    --color-border-soft: rgba(0, 0, 0, 0.03);
    --color-border-light: #dfe7e4;
    --color-border-subtle: rgba(0, 0, 0, 0.09);
    --color-border-canvas-soft: rgba(15, 23, 42, 0.08);
    --color-border-neutral-soft: rgba(148, 163, 184, 0.20);
    --color-border-neutral-strong: rgba(148, 163, 184, 0.25);
    --color-neutral-charcoal: #21252b;
    --color-neutral-ink-strong: #35414a;
    --color-neutral-slate: #2d3748;
    --color-neutral-shadow: rgba(30, 37, 43, 0.12);
    --color-shadow-panel: rgba(30, 37, 43, 0.08);
    --color-shadow-canvas: rgba(15, 23, 42, 0.12);

    --color-neutral-fill-soft: rgba(148, 163, 184, 0.10);
    --color-neutral-fill-strong: rgba(148, 163, 184, 0.12);

    --color-danger: #ef4444;
    --color-danger-rgb: 239, 68, 68;
    --color-danger-soft: #fc8181;
    --color-danger-text: #7a1220;
    --color-danger-surface-medium: rgba(239, 68, 68, 0.10);
    --color-danger-surface-emphasis: rgba(239, 68, 68, 0.14);
    --color-danger-border-soft: rgba(239, 68, 68, 0.20);
    --color-danger-border-strong: rgba(239, 68, 68, 0.45);
    --color-warning: #f59e0b;
    --color-warning-rgb: 245, 158, 11;
    --color-warning-text: #b45309;
    --color-warning-text-strong: #8a5a00;
    --color-warning-surface-soft: rgba(245, 158, 11, 0.10);
    --color-warning-surface-strong: rgba(245, 158, 11, 0.12);
    --color-warning-border-soft: rgba(245, 158, 11, 0.24);
    --color-warning-border-strong: rgba(245, 158, 11, 0.35);
    --color-info: #2563eb;
    --color-info-text-strong: #0f4ea5;
    --color-info-surface-soft: rgba(59, 130, 246, 0.08);
    --color-info-surface-medium: rgba(59, 130, 246, 0.10);
    --color-info-surface-strong: rgba(59, 130, 246, 0.12);
    --color-info-border-soft: rgba(59, 130, 246, 0.22);
    --color-info-border-strong: rgba(59, 130, 246, 0.45);

    --color-success: #3cd1aa;
    --color-success-rgb: 60, 209, 170;
    --color-success-text-strong: #0c6a4e;
    --color-success-text: #1f8f72;
    --color-success-fill-soft: rgba(60, 209, 170, 0.12);
    --color-success-fill-strong: rgba(60, 209, 170, 0.14);
    --color-success-border-soft: rgba(60, 209, 170, 0.24);
    --color-success-border-strong: rgba(60, 209, 170, 0.35);
    --color-transparent: transparent;

    /* --- GLOBAL COLOR PRIMITIVES (cross-context usage) --- */
    --color-white: #ffffff;
    --color-white-tint: #fafcff;
    --color-white-overlay-strong: rgba(255, 255, 255, 0.50);
    --color-white-text-strong: rgba(255, 255, 255, 0.84);
    --color-white-text-muted: rgba(255, 255, 255, 0.75);
    --color-white-text-medium: rgba(255, 255, 255, 0.60);
    --color-white-text-emphasis: rgba(255, 255, 255, 0.45);
    --color-black: #000000;

    --color-brand-cyan: #10e4e4;
    --color-brand-cyan-hover: #0fd4d4;
    --color-brand-cyan-rgb: 16, 228, 228;
    --color-brand-cyan-fill-soft: rgba(16, 228, 228, 0.10);
    --color-brand-cyan-fill-medium: rgba(16, 228, 228, 0.20);
    --color-brand-cyan-fill-strong: rgba(16, 228, 228, 0.34);
    --color-brand-cyan-border: rgba(16, 228, 228, 0.40);
    --color-brand-cyan-border-contrast: rgba(16, 228, 228, 0.75);
    --color-brand-cyan-glow-soft: rgba(16, 228, 228, 0.05);
    --color-brand-cyan-glow-medium: rgba(16, 228, 228, 0.15);
    --color-brand-cyan-glow-strong: rgba(16, 228, 228, 0.25);

    --color-brand-navy: hsl(232, 87%, 28%);
    --color-brand-navy-hover: hsl(232, 87%, 34%);
    --color-brand-navy-dim: hsl(232, 50%, 20%);
    --color-brand-navy-deep: hsl(234.38deg 100% 18.82%);
    /* --live-* defaults → css/portfolio-live.css */
    /* --clr-* prefix deprecated (2026-06-01) — all removed */

    /* --- 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(--color-brand-cyan);
    --interactive-text: var(--color-white);
    --surface-main: var(--studio-bg);
    --surface-panel: var(--studio-panel);

    /* --- ADMIN THEME (light surface, white cards) --- */
    --surface-admin-bg: #f0f2f5;
    --surface-admin-card: #ffffff;
    --text-admin-main: #111827;
    --text-admin-dim: #64748b;
    --border-admin: rgba(0, 0, 0, 0.09);
    
    /* --- COMPONENT TOKENS (CONTEXT AWARE) --- */
    --panel-bg: var(--studio-panel);
    --panel-border: var(--studio-border);
    --panel-text: var(--studio-text);
    --input-text: var(--studio-text);

    /* --glass-* / --avatar-* / --p-section-* → css/layouts/layout-base.css */


    /* --- TYPOGRAPHY --- */
    --font-main: 'Kufam', sans-serif;
    --base-font-size: 16px; /* THE SOURCE OF TRUTH FOR 1rem */
    
    /* --- SCALING & SPACING --- */
    /* 1rem = 16px. All spacing uses rem for responsive scaling. */
    --space-2xs: 0.375rem; /* 6px */
    --space-xs: 0.25rem;   /* 4px */
    --space-sm: 0.5rem;    /* 8px */
    --space-10: 0.625rem;  /* 10px */
    --space-12: 0.75rem;   /* 12px */
    --space-14: 0.875rem;  /* 14px */
    --space-md: 1rem;      /* 16px */
    --space-18: 1.125rem;  /* 18px */
    --space-20: 1.25rem;   /* 20px */
    --space-22: 1.375rem;  /* 22px */
    --space-lg: 1.5rem;    /* 24px */
    --space-26: 1.625rem;  /* 26px */
    --space-28: 1.75rem;   /* 28px */
    --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(--color-brand-cyan-fill-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-medium: 260ms;
    --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-xl: 1.5rem;       /* 24px — large stats, counters */
    --fs-h2: 1.25rem;
    --fs-body: 1rem;
    --fs-sm: 0.875rem;     /* 14px — labels, controls, card sub-headings */
    --fs-caption: 0.85rem;
    --fs-meta: 0.75rem;    /* 12px — descriptions, hints, badges, timestamps */
    --fs-xs: 0.6875rem;    /* 11px — labels, tags, micro text */

    --fw-bold: 800;
    --fw-medium: 700;
    --fw-semi: 600;
    --fw-main: 400;
}


/* --- ADMIN THEME OVERRIDE --- */

/* Panel tokens: apply everywhere the admin layout exists (sidebar cards too) */
[lang="ar"][dir="rtl"] body:has(.admin-layout),
.admin-main {
    --panel-bg: var(--surface-admin-card);
    --panel-border: var(--border-admin);
    --panel-text: var(--text-admin-main);
}

/* Content area only: flip ALL studio tokens so every component is readable
   on a light background. Sidebar (.admin-sidebar) is a sibling of
   .admin-main, not inside it, so it stays dark and unaffected. */
.admin-main {
    --input-bg:          rgba(0, 0, 0, 0.05);
    --input-text:        var(--text-admin-main);
    --studio-bg:         var(--surface-admin-bg);
    --studio-panel:      var(--surface-admin-card);
    --studio-panel-light: rgba(0, 0, 0, 0.04);
    --studio-border:     rgba(0, 0, 0, 0.09);
    --studio-text:       var(--text-admin-main);
    --studio-text-dim:   var(--text-admin-dim);
}

/* 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; }

/* glass fallback overrides → css/layouts/layout-base.css */