/* ============================================
   DIGITAL ACCESS MANAGER V2 - DESIGN TOKENS
   Style: ChatGPT-inspired, Monochrome-first
   Accent: #10A37F (Teal Green)
   ============================================ */

   :root {
    /* ── Color: Monochrome Base ── */
    --color-bg-primary: #FFFFFF;
    --color-bg-secondary: #F4F4F4;
    --color-bg-tertiary: #EBEBEB;
    --color-text-primary: #0D0D0D;
    --color-text-secondary: #353535;
    --color-text-muted: #6E6E80;
    --color-text-inverse: #FFFFFF;
    --color-border-default: #E5E5E5;
    --color-border-strong: #CCCCCC;
  
    /* ── Color: Brand Accent (ChatGPT Green) ── */
    --color-brand-primary: #10A37F;
    --color-brand-primary-hover: #0D8A6A;
    --color-brand-primary-soft: rgba(16, 163, 127, 0.08);
  
    /* ── Color: Semantic States ── */
    --color-success: #22C55E;
    --color-success-soft: rgba(34, 197, 94, 0.08);
    --color-warning: #F59E0B;
    --color-warning-soft: rgba(245, 158, 11, 0.08);
    --color-danger: #EF4444;
    --color-danger-soft: rgba(239, 68, 68, 0.06);
    --color-info: #3B82F6;
    --color-info-soft: rgba(59, 130, 246, 0.08);
  
    /* ── Color: Focus ── */
    --color-focus-ring: rgba(16, 163, 127, 0.3);
  
    /* ── Spacing: 8-point System ── */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    --space-20: 80px;
    --space-24: 96px;
  
    /* ── Radius ── */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-pill: 9999px;
  
    /* ── Shadows (Subtle) ── */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.10);
    --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.12);
  
    /* ── Motion ── */
    --duration-fast: 150ms;
    --duration-base: 250ms;
    --duration-slow: 400ms;
  
    /* ── Typography ── */
    --font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'SF Mono', 'Fira Code', 'Fira Mono', 'Roboto Mono', monospace;
  
    /* ============================================
       BACKWARD COMPATIBILITY (V1 → V2 Mapping)
       Semua variabel lama tetap berfungsi.
       Akan dihapus bertahap setelah semua file
       PHP di-migrate ke token V2.
       ============================================ */
    --bg: var(--color-bg-primary);
    --surface: var(--color-bg-primary);
    --surface-hover: var(--color-bg-secondary);
    --surface-soft: var(--color-bg-secondary);
    --text: var(--color-text-primary);
    --text-muted: var(--color-text-muted);
    --border: var(--color-border-default);
    --primary: var(--color-brand-primary);
    --primary-hover: var(--color-brand-primary-hover);
    --primary-light: var(--color-brand-primary-soft);
    --success: var(--color-success);
    --warning: var(--color-warning);
    --danger: var(--color-danger);
    --shadow: var(--shadow-md);
    --radius: var(--radius-lg);
  }
  
  /* ============================================
     DARK MODE
     ============================================ */
  [data-theme="dark"] {
    /* ── Color: Monochrome Base ── */
    --color-bg-primary: #0D0D0D;
    --color-bg-secondary: #1A1A1A;
    --color-bg-tertiary: #2D2D2D;
    --color-text-primary: #ECECF1;
    --color-text-secondary: #D1D1D1;
    --color-text-muted: #8E8EA0;
    --color-text-inverse: #0D0D0D;
    --color-border-default: #2D2D2D;
    --color-border-strong: #444444;
  
    /* ── Color: Brand Accent ── */
    --color-brand-primary: #10A37F;
    --color-brand-primary-hover: #1ED6A8;
    --color-brand-primary-soft: rgba(16, 163, 127, 0.15);
  
    /* ── Color: Semantic States ── */
    --color-success: #22C55E;
    --color-success-soft: rgba(34, 197, 94, 0.12);
    --color-warning: #F59E0B;
    --color-warning-soft: rgba(245, 158, 11, 0.12);
    --color-danger: #EF4444;
    --color-danger-soft: rgba(239, 68, 68, 0.12);
    --color-info: #3B82F6;
    --color-info-soft: rgba(59, 130, 246, 0.12);
  
    /* ── Color: Focus ── */
    --color-focus-ring: rgba(16, 163, 127, 0.4);
  
    /* ── Shadows (Darker) ── */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
    --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.6);
  
    /* ── Backward Compat (Dark) ── */
    --bg: var(--color-bg-primary);
    --surface: var(--color-bg-secondary);
    --surface-hover: var(--color-bg-tertiary);
    --surface-soft: var(--color-bg-secondary);
    --text: var(--color-text-primary);
    --text-muted: var(--color-text-muted);
    --border: var(--color-border-default);
    --primary: var(--color-brand-primary);
    --primary-hover: var(--color-brand-primary-hover);
    --primary-light: var(--color-brand-primary-soft);
    --success: var(--color-success);
    --warning: var(--color-warning);
    --danger: var(--color-danger);
    --shadow: var(--shadow-md);
    --radius: var(--radius-lg);
  }