/* ============================================================
   BuildPro AI — Design Tokens
   ────────────────────────────────────────────────────────────
   Single source of truth for every visual decision.
   Inspired by: Linear, Vercel, Stripe, Apple HIG.
   ============================================================ */

:root {
    /* ============================================================
       COLOR — Neutral Scale (OKLCH-based for perceptual uniformity)
       ============================================================ */
    --gray-0:   #ffffff;
    --gray-50:  #fafafa;
    --gray-100: #f4f4f5;
    --gray-150: #ececef;
    --gray-200: #e4e4e7;
    --gray-300: #d4d4d8;
    --gray-400: #a1a1aa;
    --gray-500: #71717a;
    --gray-600: #52525b;
    --gray-700: #3f3f46;
    --gray-800: #27272a;
    --gray-900: #18181b;
    --gray-950: #09090b;

    /* ============================================================
       COLOR — Brand (primary accent: sky → violet gradient)
       ============================================================ */
    --brand-50:  #f0f9ff;
    --brand-100: #e0f2fe;
    --brand-200: #bae6fd;
    --brand-300: #7dd3fc;
    --brand-400: #38bdf8;
    --brand-500: #0ea5e9;   /* main */
    --brand-600: #0284c7;
    --brand-700: #0369a1;
    --brand-800: #075985;
    --brand-900: #0c4a6e;

    /* BuildPro signature deep surface (user pod, dark callouts, popovers) */
    --bp-deep:        #4f4a54;
    --bp-deep-2:      #5a5560;
    --bp-deep-line:   #635e69;
    --bp-deep-ink:    #f1f5f9;
    --bp-deep-ink-2:  #c8ccd2;
    --bp-deep-ink-3:  #8a8d92;

    --accent-50:  #f5f3ff;
    --accent-500: #8b5cf6;
    --accent-600: #7c3aed;

    --brand-gradient: linear-gradient(135deg, var(--brand-500) 0%, var(--accent-500) 100%);
    --brand-gradient-soft: linear-gradient(135deg, var(--brand-50) 0%, var(--accent-50) 100%);

    /* ============================================================
       COLOR — Semantic (success, warning, danger, info)
       ============================================================ */
    --success-50:  #f0fdf4;
    --success-100: #dcfce7;
    --success-500: #22c55e;
    --success-600: #16a34a;
    --success-700: #15803d;

    --warning-50:  #fffbeb;
    --warning-100: #fef3c7;
    --warning-500: #f59e0b;
    --warning-600: #d97706;
    --warning-700: #b45309;

    --danger-50:   #fef2f2;
    --danger-100:  #fee2e2;
    --danger-500:  #ef4444;
    --danger-600:  #dc2626;
    --danger-700:  #b91c1c;

    --info-50:     #eff6ff;
    --info-100:    #dbeafe;
    --info-500:    #3b82f6;
    --info-600:    #2563eb;

    /* ============================================================
       SURFACE — Semantic layers (use these, not raw grays)
       ============================================================ */
    --surface-0:   var(--gray-0);       /* page background */
    --surface-1:   var(--gray-50);      /* card / sidebar */
    --surface-2:   var(--gray-100);     /* hover */
    --surface-3:   var(--gray-150);     /* pressed / active */
    --surface-inv: var(--gray-900);     /* inverted (tooltips, dark card) */

    --border-subtle:   var(--gray-150);
    --border-default:  var(--gray-200);
    --border-strong:   var(--gray-300);
    --border-focus:    var(--brand-500);

    --text-primary:    var(--gray-900);
    --text-secondary:  var(--gray-600);
    --text-tertiary:   var(--gray-500);
    --text-disabled:   var(--gray-400);
    --text-inverse:    var(--gray-0);
    --text-brand:      var(--brand-600);
    --text-danger:     var(--danger-600);
    --text-success:    var(--success-600);

    /* ============================================================
       TYPOGRAPHY
       ============================================================ */
    --font-sans: 'Inter', 'IBM Plex Sans Arabic', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-arabic: 'IBM Plex Sans Arabic', 'Inter', system-ui, sans-serif;
    --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
    --font-display: 'Space Grotesk', var(--font-sans);

    /* Type scale — 8 steps only (discipline) */
    --text-xs:   11px;   /* tags, captions */
    --text-sm:   13px;   /* body small, table cells */
    --text-base: 14px;   /* body — default UI */
    --text-md:   15px;   /* body large */
    --text-lg:   17px;   /* section heads inline */
    --text-xl:   20px;   /* h3 */
    --text-2xl:  24px;   /* h2 */
    --text-3xl:  32px;   /* h1 */
    --text-4xl:  44px;   /* hero */

    --leading-tight:   1.2;
    --leading-snug:    1.35;
    --leading-normal:  1.5;
    --leading-relaxed: 1.65;

    --weight-regular:  400;
    --weight-medium:   500;
    --weight-semibold: 600;
    --weight-bold:     700;

    --tracking-tight:  -0.02em;
    --tracking-normal: 0;
    --tracking-wide:   0.04em;

    /* ============================================================
       SPACING — 4px grid, no off-grid values
       ============================================================ */
    --space-0:    0;
    --space-px:   1px;
    --space-0-5:  2px;
    --space-1:    4px;
    --space-1-5:  6px;
    --space-2:    8px;
    --space-2-5:  10px;
    --space-3:    12px;
    --space-4:    16px;
    --space-5:    20px;
    --space-6:    24px;
    --space-7:    28px;
    --space-8:    32px;
    --space-10:   40px;
    --space-12:   48px;
    --space-16:   64px;
    --space-20:   80px;
    --space-24:   96px;

    /* ============================================================
       RADIUS
       ============================================================ */
    --radius-none: 0;
    --radius-xs:   4px;
    --radius-sm:   6px;
    --radius-md:   8px;
    --radius-lg:   10px;
    --radius-xl:   14px;
    --radius-2xl:  20px;
    --radius-full: 9999px;

    /* ============================================================
       ELEVATION — realistic, layered shadows
       ============================================================ */
    --shadow-xs:  0 1px 2px 0 rgb(0 0 0 / 0.04);
    --shadow-sm:  0 1px 2px 0 rgb(0 0 0 / 0.05), 0 1px 1px -1px rgb(0 0 0 / 0.04);
    --shadow-md:  0 4px 6px -1px rgb(0 0 0 / 0.06), 0 2px 4px -2px rgb(0 0 0 / 0.04);
    --shadow-lg:  0 10px 15px -3px rgb(0 0 0 / 0.08), 0 4px 6px -4px rgb(0 0 0 / 0.05);
    --shadow-xl:  0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.05);
    --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.18);
    --shadow-inner: inset 0 1px 2px 0 rgb(0 0 0 / 0.05);

   --ring-focus: 0 0 0 3px rgb(14 165 233 / 0.22);
    --ring-danger: 0 0 0 3px rgb(239 68 68 / 0.22);

    /* ============================================================
       MOTION — spring-based, not linear
       ============================================================ */
    --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
    --ease-in-out: cubic-bezier(0.83, 0, 0.17, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

    --duration-instant: 80ms;
    --duration-fast:    150ms;
    --duration-normal:  220ms;
    --duration-slow:    320ms;
    --duration-slower:  520ms;

    /* ============================================================
       Z-INDEX — explicit stacking order
       ============================================================ */
    --z-base:       1;
    --z-dropdown:   100;
    --z-sticky:     200;
    --z-drawer:     300;
    --z-modal:      400;
    --z-popover:    500;
    --z-toast:      600;
    --z-tooltip:    700;
    --z-cmdk:       800;

    /* ============================================================
       LAYOUT
       ============================================================ */
    --topbar-height:      52px;
    --sidebar-width:      248px;
    --sidebar-collapsed:  64px;
    --content-max:        1440px;

    /* Slim rail + quick-bar (Canva-inspired) */
    --rail-width:           58px;
    --rail-icon-size:       28px;
    --rail-pill-size:       42px;
    --flyout-width:         272px;
    --quickbar-icon-size:   38px;
    --quickbar-gap:         6px;
    --quickbar-radius:      14px;
    --ripple-color:         rgba(99, 102, 241, 0.32);
    --anim-spring-soft:     cubic-bezier(0.34, 1.56, 0.64, 1);

    /* ============================================================
       GLASS (frosted backgrounds)
       ============================================================ */
    --glass-bg: rgba(255, 255, 255, 0.72);
    --glass-blur: saturate(180%) blur(20px);

    /* ============================================================
       SIDEBAR — flat French analytics palette (canonical)
       Used by .ds-sidebar component across admin/dashboard/orders/
       store-builder/app-shell. Override only via dark theme block.
       ============================================================ */
    --sidebar-bg:            #ffffff;
    --sidebar-border:        #ececec;
    --sidebar-divider:       #f0f0f0;
    --sidebar-text:          #1f2937;
    --sidebar-text-muted:    #6b7280;
    --sidebar-section-label: #9ca3af;
    --sidebar-hover:         #f6f7f9;
   --sidebar-active-bg:     #eef2ff;
    --sidebar-active-text:   #111827;
   --sidebar-accent:        #2f63d8;
    --sidebar-icon:          #6b7280;
   --sidebar-icon-active:   #2f63d8;
    --sidebar-shadow-rail:   inset -1px 0 0 var(--sidebar-border);

    --sidebar-w:             248px;   /* alias unifié pour migration legacy */
    --sidebar-collapsed-w:   68px;

    --badge-bg:              #f1f3f5;
    --badge-text:            #4b5563;
    --badge-bg-strong:       #111827;
    --badge-text-strong:     #ffffff;
}

/* ============================================================
   DARK MODE — unified on Barbaros signature surface (#4f4a54)
   Surfaces ladder:  surface-0 (deepest) → surface-3 (raised)
   ============================================================ */
:root.dark,
[data-theme="dark"],
body.dark,
body.dark-mode,
.dark .ds-sidebar,
.dark-mode .ds-sidebar {
    /* Page + cards: signature slate-violet, no dead-black contrast */
    --surface-0:   #383739;   /* page background (deepest) */
    --surface-1:   #4f4a54;   /* cards, panels, tables — signature */
    --surface-2:   #5a5560;   /* hover / raised */
    --surface-3:   #6a6470;   /* pressed / active */
    --surface-inv: var(--gray-100);

    --border-subtle:  #5a5560;
    --border-default: #635e69;
    --border-strong:  #756f7c;

    --text-primary:   #f4f4f5;
    --text-secondary: #c2bdc8;
    --text-tertiary:  #a39ea8;
    --text-disabled:  #7a757f;
    --text-inverse:   #1a181c;

    --shadow-xs:  0 1px 2px 0 rgb(0 0 0 / 0.30);
    --shadow-sm:  0 1px 2px 0 rgb(0 0 0 / 0.35), 0 1px 1px -1px rgb(0 0 0 / 0.30);
    --shadow-md:  0 4px 6px -1px rgb(0 0 0 / 0.35), 0 2px 4px -2px rgb(0 0 0 / 0.25);
    --shadow-lg:  0 10px 15px -3px rgb(0 0 0 / 0.40), 0 4px 6px -4px rgb(0 0 0 / 0.30);
    --shadow-xl:  0 20px 25px -5px rgb(0 0 0 / 0.45), 0 8px 10px -6px rgb(0 0 0 / 0.35);

    --glass-bg: rgba(79, 74, 84, 0.78);

    --ring-focus: 0 0 0 3px rgb(167 139 250 / 0.32);

    /* Sidebar (canonical) */
    --sidebar-bg:            #4f4a54;
    --sidebar-border:        #635e69;
    --sidebar-divider:       #5a5560;
    --sidebar-text:          #f1f1f2;
    --sidebar-text-muted:    #c2bdc8;
    --sidebar-section-label: #a39ea8;
    --sidebar-hover:         #5a5560;
    --sidebar-active-bg:     #6a6470;
    --sidebar-active-text:   #ffffff;
    --sidebar-accent:        #a78bfa;
    --sidebar-icon:          #cfcad4;
    --sidebar-icon-active:   #ffffff;
    --sidebar-shadow-rail:   inset -1px 0 0 var(--sidebar-border);

    --badge-bg:              #5a5560;
    --badge-text:            #e8e4ec;
    --badge-bg-strong:       #f4f4f5;
    --badge-text-strong:     #1a181c;
}

/* RTL-aware logical directions handled via CSS logical properties
   (margin-inline, padding-inline, border-inline) throughout components */