/* ══════════════════════════════════════════════════════════════════════
   VPTWĐ Design System — Token Layer for WebAppBase-z103
   ──────────────────────────────────────────────────────────────────────
   Adapted from: Design System 1.1 (VPTWĐ / Figma tokens)
   Purpose: Provides --ds-* CSS custom properties as a semantic token
   layer. These tokens are consumed by ds-theme-override.css to restyle
   Bootstrap/Metronic components without touching markup.

   This file does NOT contain any selectors that target existing components.
   It only defines variables on :root.
   ══════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Typography ─────────────────────────────────────────────────── */
  --ds-font-sans: "Inter", "Be Vietnam Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --ds-font-display: "Be Vietnam Pro", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;

  /* ── Brand: Party Red ───────────────────────────────────────────── */
  --ds-primary-50:  #FEF2F2;
  --ds-primary-100: #FEE2E2;
  --ds-primary-200: #FECACA;
  --ds-primary-300: #FCA5A5;
  --ds-primary-400: #F87171;
  --ds-primary-500: #DC2626;
  --ds-primary:     #B9000E;
  --ds-primary-hover:  #A60002;
  --ds-primary-active: #950002;
  --ds-primary-contrast: #ffffff;

  /* ── Neutral / Surfaces ─────────────────────────────────────────── */
  --ds-surface:        #ffffff;
  --ds-surface-subtle: #F6F7F9;
  --ds-surface-muted:  #F0F2F4;
  --ds-surface-hover:  #F0F2F4;
  --ds-surface-inverse: #14151A;

  /* ── Text ───────────────────────────────────────────────────────── */
  --ds-text:           #14151A;
  --ds-text-secondary: #4B5563;
  --ds-text-muted:     #6B7280;
  --ds-text-disabled:  #9CA3AF;
  --ds-text-on-primary: #ffffff;

  /* ── Borders ────────────────────────────────────────────────────── */
  --ds-border:        #E5E7EB;
  --ds-border-strong: #C3C8D0;
  --ds-border-subtle: #F0F2F4;

  /* ── Focus Ring ─────────────────────────────────────────────────── */
  --ds-focus: rgb(96, 165, 250);
  --ds-focus-ring: 0 0 0 3px rgba(96, 165, 250, 0.45);

  /* ── Semantic Status ────────────────────────────────────────────── */
  /* Success */
  --ds-success:        #16A34A;
  --ds-success-hover:  #15803D;
  --ds-success-bg:     #F0FDF4;
  --ds-success-border: #BBF7D0;
  --ds-success-700:    #15803D;

  /* Info */
  --ds-info:           #2563EB;
  --ds-info-hover:     #1D4ED8;
  --ds-info-bg:        #EFF6FF;
  --ds-info-border:    #BFDBFE;
  --ds-info-700:       #1D4ED8;

  /* Warning */
  --ds-warning:        #EA580C;
  --ds-warning-hover:  #C2410C;
  --ds-warning-bg:     #FFF7ED;
  --ds-warning-border: #FED7AA;
  --ds-warning-700:    #C2410C;

  /* Danger / Error */
  --ds-danger:         #DC2626;
  --ds-danger-hover:   #B91C1C;
  --ds-danger-bg:      #FEF2F2;
  --ds-danger-border:  #FECACA;
  --ds-danger-700:     #B91C1C;

  /* ── Radii ──────────────────────────────────────────────────────── */
  --ds-radius-xs:   4px;
  --ds-radius-sm:   6px;
  --ds-radius-md:   8px;
  --ds-radius-lg:   10px;
  --ds-radius-xl:   12px;
  --ds-radius-2xl:  16px;
  --ds-radius-full: 9999px;

  /* ── Spacing Scale ──────────────────────────────────────────────── */
  --ds-space-1: 4px;
  --ds-space-2: 8px;
  --ds-space-3: 12px;
  --ds-space-4: 16px;
  --ds-space-5: 20px;
  --ds-space-6: 24px;
  --ds-space-8: 32px;

  /* ── Elevation / Shadows ────────────────────────────────────────── */
  --ds-shadow-xs: 0 1px 2px rgba(18, 26, 43, 0.06);
  --ds-shadow-sm: 0 1px 3px rgba(18, 26, 43, 0.10), 0 1px 2px rgba(18, 26, 43, 0.06);
  --ds-shadow-md: 0 4px 8px -2px rgba(18, 26, 43, 0.10), 0 2px 4px -2px rgba(18, 26, 43, 0.06);
  --ds-shadow-lg: 0 12px 16px -4px rgba(18, 26, 43, 0.10), 0 4px 6px -2px rgba(18, 26, 43, 0.05);
  --ds-shadow-xl: 0 20px 28px -6px rgba(18, 26, 43, 0.14), 0 8px 10px -6px rgba(18, 26, 43, 0.06);

  /* ── Control Sizing ─────────────────────────────────────────────── */
  --ds-control-h-sm: 36px;
  --ds-control-h-md: 44px;
  --ds-control-h-lg: 48px;

  /* ── Motion ─────────────────────────────────────────────────────── */
  --ds-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ds-dur: 160ms;

  /* ── Sidebar / Brand (dark) ─────────────────────────────────────── */
  --ds-sidebar-bg: #1a1a27;
  --ds-sidebar-highlight: var(--ds-primary);
}