/* ==========================================================================
   Design Token System — public/design-tokens.css
   SmartMeeting Visual Enhancement Layer
   
   All tokens use the --dt- prefix to avoid conflicts with existing CSS
   variables defined in styles.css and admin.css.
   
   Existing variable mapping (compatibility aliases):
     --page-bg        → --dt-bg-page
     --surface-bg     → --dt-bg-surface
     --surface-color  → --dt-bg-surface
     --bg-color       → --dt-bg-page
     --text-main      → --dt-text-primary
     --text-primary   → --dt-text-primary
     --text-muted     → --dt-text-secondary
     --text-secondary → --dt-text-secondary
     --accent-main    → --dt-accent-primary
     --accent-primary → --dt-accent-primary
     --accent-strong  → --dt-color-primary-700
     --success        → --dt-accent-success
     --danger         → --dt-accent-danger
     --warning        → --dt-accent-warning
     --border-color   → --dt-border-default
     --shadow-soft    → --dt-shadow-soft
     --shadow-medium  → --dt-shadow-medium
     --shadow-large   → --dt-shadow-large
     --radius-small   → --dt-radius-sm
     --radius-medium  → --dt-radius-md
     --radius-large   → --dt-radius-lg
   
   Fallback strategy: new token references use
     var(--dt-xxx, var(--existing-fallback))
   so the page renders correctly even if this file fails to load.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Task 1.1: Primitive Tokens (Light Mode)
   -------------------------------------------------------------------------- */
:root {

  /* ---- Color Scales ---- */

  /* Primary (Blue) */
  --dt-color-primary-50:  #eff6ff;
  --dt-color-primary-100: #dbeafe;
  --dt-color-primary-200: #bfdbfe;
  --dt-color-primary-300: #93c5fd;
  --dt-color-primary-400: #60a5fa;
  --dt-color-primary-500: #1f6feb;
  --dt-color-primary-600: #2563eb;
  --dt-color-primary-700: #1a5cc7;
  --dt-color-primary-800: #1e40af;
  --dt-color-primary-900: #1e3a8a;

  /* Secondary (Slate) */
  --dt-color-secondary-50:  #f8fafc;
  --dt-color-secondary-100: #f1f5f9;
  --dt-color-secondary-200: #e2e8f0;
  --dt-color-secondary-300: #cbd5e1;
  --dt-color-secondary-400: #94a3b8;
  --dt-color-secondary-500: #64748b;
  --dt-color-secondary-600: #475569;
  --dt-color-secondary-700: #334155;
  --dt-color-secondary-800: #1e293b;
  --dt-color-secondary-900: #0f172a;

  /* Success (Green) */
  --dt-color-success-50:  #f0fdf4;
  --dt-color-success-100: #dcfce7;
  --dt-color-success-200: #bbf7d0;
  --dt-color-success-300: #86efac;
  --dt-color-success-400: #4ade80;
  --dt-color-success-500: #059669;
  --dt-color-success-600: #16a34a;
  --dt-color-success-700: #15803d;
  --dt-color-success-800: #166534;
  --dt-color-success-900: #14532d;

  /* Danger (Red) */
  --dt-color-danger-50:  #fef2f2;
  --dt-color-danger-100: #fee2e2;
  --dt-color-danger-200: #fecaca;
  --dt-color-danger-300: #fca5a5;
  --dt-color-danger-400: #f87171;
  --dt-color-danger-500: #dc2626;
  --dt-color-danger-600: #dc2626;
  --dt-color-danger-700: #b91c1c;
  --dt-color-danger-800: #991b1b;
  --dt-color-danger-900: #7f1d1d;

  /* Warning (Amber) */
  --dt-color-warning-50:  #fffbeb;
  --dt-color-warning-100: #fef3c7;
  --dt-color-warning-200: #fde68a;
  --dt-color-warning-300: #fcd34d;
  --dt-color-warning-400: #fbbf24;
  --dt-color-warning-500: #d97706;
  --dt-color-warning-600: #d97706;
  --dt-color-warning-700: #b45309;
  --dt-color-warning-800: #92400e;
  --dt-color-warning-900: #78350f;

  /* Neutral (Gray) */
  --dt-color-neutral-50:  #f9fafb;
  --dt-color-neutral-100: #f3f4f6;
  --dt-color-neutral-200: #e5e7eb;
  --dt-color-neutral-300: #d1d5db;
  --dt-color-neutral-400: #9ca3af;
  --dt-color-neutral-500: #6b7280;
  --dt-color-neutral-600: #4b5563;
  --dt-color-neutral-700: #374151;
  --dt-color-neutral-800: #1f2937;
  --dt-color-neutral-900: #111827;

  /* ---- Spacing (4px increments: 4px–64px) ---- */
  --dt-space-1:  4px;
  --dt-space-2:  8px;
  --dt-space-3:  12px;
  --dt-space-4:  16px;
  --dt-space-5:  20px;
  --dt-space-6:  24px;
  --dt-space-7:  28px;
  --dt-space-8:  32px;
  --dt-space-9:  36px;
  --dt-space-10: 40px;
  --dt-space-11: 44px;
  --dt-space-12: 48px;
  --dt-space-13: 52px;
  --dt-space-14: 56px;
  --dt-space-15: 60px;
  --dt-space-16: 64px;

  /* ---- Typography ---- */

  /* Font Sizes */
  --dt-font-size-xs:  11px;
  --dt-font-size-sm:  13px;
  --dt-font-size-base: 15px;
  --dt-font-size-md:  17px;
  --dt-font-size-lg:  20px;
  --dt-font-size-xl:  24px;
  --dt-font-size-2xl: 30px;

  /* Font Weights */
  --dt-font-weight-light:    300;
  --dt-font-weight-normal:   400;
  --dt-font-weight-medium:   500;
  --dt-font-weight-semibold: 600;
  --dt-font-weight-bold:     700;

  /* Line Heights */
  --dt-leading-tight:   1.3;
  --dt-leading-normal:  1.5;
  --dt-leading-relaxed: 1.7;

  /* ---- Shadows ---- */
  --dt-shadow-soft:   0 1px 3px rgba(15, 23, 42, 0.06), 0 6px 16px rgba(15, 23, 42, 0.06);
  --dt-shadow-medium: 0 4px 12px rgba(15, 23, 42, 0.08), 0 12px 32px rgba(15, 23, 42, 0.08);
  --dt-shadow-large:  0 8px 24px rgba(15, 23, 42, 0.10), 0 24px 48px rgba(15, 23, 42, 0.10);
  --dt-shadow-xl:     0 12px 36px rgba(15, 23, 42, 0.14), 0 32px 64px rgba(15, 23, 42, 0.12);

  /* ---- Border Radius ---- */
  --dt-radius-sm:   8px;
  --dt-radius-md:   12px;
  --dt-radius-lg:   16px;
  --dt-radius-full: 9999px;

  /* --------------------------------------------------------------------------
     Task 1.1 (continued): Semantic Tokens
     These reference primitive tokens above and provide fallbacks to existing
     CSS variables so the page degrades gracefully if this file fails to load.
     -------------------------------------------------------------------------- */

  /* Backgrounds */
  --dt-bg-page:    var(--dt-color-neutral-50);
  --dt-bg-surface: #ffffff;
  --dt-bg-subtle:  var(--dt-color-neutral-100);

  /* Text */
  --dt-text-primary:   var(--dt-color-neutral-900);
  --dt-text-secondary: var(--dt-color-neutral-500);
  --dt-text-muted:     var(--dt-color-neutral-400);

  /* Borders */
  --dt-border-default: var(--dt-color-neutral-200);
  --dt-border-strong:  var(--dt-color-neutral-300);

  /* Accents */
  --dt-accent-primary: var(--dt-color-primary-500);
  --dt-accent-success: var(--dt-color-success-500);
  --dt-accent-danger:  var(--dt-color-danger-500);
  --dt-accent-warning: var(--dt-color-warning-500);

  /* Component Tokens */
  --dt-btn-bg:           var(--dt-color-primary-500);
  --dt-btn-hover-bg:     var(--dt-color-primary-700);
  --dt-card-shadow:      var(--dt-shadow-medium);
  --dt-card-hover-shadow: var(--dt-shadow-large);
  --dt-modal-overlay-bg: rgba(15, 23, 42, 0.45);
}

/* --------------------------------------------------------------------------
   Task 1.2: Dark Mode Color Tokens
   All --dt-color-* tokens redefined for dark mode.
   -------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root {

    /* Primary (Blue — dark mode) */
    --dt-color-primary-50:  #0d1f3c;
    --dt-color-primary-100: #0f2a52;
    --dt-color-primary-200: #133a6e;
    --dt-color-primary-300: #1a4f8f;
    --dt-color-primary-400: #2563eb;
    --dt-color-primary-500: #58a6ff;
    --dt-color-primary-600: #79b8ff;
    --dt-color-primary-700: #a5d6ff;
    --dt-color-primary-800: #c8e1ff;
    --dt-color-primary-900: #e6f0ff;

    /* Secondary (Slate — dark mode) */
    --dt-color-secondary-50:  #0d1117;
    --dt-color-secondary-100: #161b22;
    --dt-color-secondary-200: #21262d;
    --dt-color-secondary-300: #30363d;
    --dt-color-secondary-400: #484f58;
    --dt-color-secondary-500: #6e7681;
    --dt-color-secondary-600: #8b949e;
    --dt-color-secondary-700: #b1bac4;
    --dt-color-secondary-800: #c9d1d9;
    --dt-color-secondary-900: #e6edf3;

    /* Success (Green — dark mode) */
    --dt-color-success-50:  #0d2418;
    --dt-color-success-100: #0f3321;
    --dt-color-success-200: #14532d;
    --dt-color-success-300: #166534;
    --dt-color-success-400: #22863a;
    --dt-color-success-500: #3fb950;
    --dt-color-success-600: #56d364;
    --dt-color-success-700: #7ee787;
    --dt-color-success-800: #aff5b4;
    --dt-color-success-900: #d3ffd8;

    /* Danger (Red — dark mode) */
    --dt-color-danger-50:  #2d1214;
    --dt-color-danger-100: #3d1518;
    --dt-color-danger-200: #5c2327;
    --dt-color-danger-300: #7f1d1d;
    --dt-color-danger-400: #da3633;
    --dt-color-danger-500: #f85149;
    --dt-color-danger-600: #ff7b72;
    --dt-color-danger-700: #ffa198;
    --dt-color-danger-800: #ffc1ba;
    --dt-color-danger-900: #ffe0dc;

    /* Warning (Amber — dark mode) */
    --dt-color-warning-50:  #2a1f0e;
    --dt-color-warning-100: #3d2c10;
    --dt-color-warning-200: #5c3d12;
    --dt-color-warning-300: #7b5116;
    --dt-color-warning-400: #b08800;
    --dt-color-warning-500: #d29922;
    --dt-color-warning-600: #e3b341;
    --dt-color-warning-700: #f0c74e;
    --dt-color-warning-800: #f7df8e;
    --dt-color-warning-900: #fef3c7;

    /* Neutral (Gray — dark mode) */
    --dt-color-neutral-50:  #0d1117;
    --dt-color-neutral-100: #161b22;
    --dt-color-neutral-200: #21262d;
    --dt-color-neutral-300: #30363d;
    --dt-color-neutral-400: #484f58;
    --dt-color-neutral-500: #6e7681;
    --dt-color-neutral-600: #8b949e;
    --dt-color-neutral-700: #b1bac4;
    --dt-color-neutral-800: #c9d1d9;
    --dt-color-neutral-900: #e6edf3;

    /* Semantic Tokens — dark mode overrides */
    --dt-bg-page:    #0d1117;
    --dt-bg-surface: #161b22;
    --dt-bg-subtle:  #1c2128;

    --dt-text-primary:   #e6edf3;
    --dt-text-secondary: #8b949e;
    --dt-text-muted:     #6e7681;

    --dt-border-default: #30363d;
    --dt-border-strong:  #484f58;

    --dt-accent-primary: #58a6ff;
    --dt-accent-success: #3fb950;
    --dt-accent-danger:  #f85149;
    --dt-accent-warning: #d29922;

    /* Component Tokens — dark mode overrides */
    --dt-btn-bg:           #58a6ff;
    --dt-btn-hover-bg:     #79b8ff;
    --dt-card-shadow:      0 4px 12px rgba(1, 4, 9, 0.4), 0 12px 32px rgba(1, 4, 9, 0.3);
    --dt-card-hover-shadow: 0 8px 24px rgba(1, 4, 9, 0.5), 0 24px 48px rgba(1, 4, 9, 0.4);
    --dt-modal-overlay-bg: rgba(1, 4, 9, 0.6);

    /* Shadows — dark mode */
    --dt-shadow-soft:   0 1px 3px rgba(1, 4, 9, 0.3), 0 6px 16px rgba(1, 4, 9, 0.3);
    --dt-shadow-medium: 0 4px 12px rgba(1, 4, 9, 0.4), 0 12px 32px rgba(1, 4, 9, 0.3);
    --dt-shadow-large:  0 8px 24px rgba(1, 4, 9, 0.5), 0 24px 48px rgba(1, 4, 9, 0.4);
    --dt-shadow-xl:     0 12px 36px rgba(1, 4, 9, 0.6), 0 32px 64px rgba(1, 4, 9, 0.5);
  }
}

/* --------------------------------------------------------------------------
   Task 1.3: Compatibility Alias Reference
   
   This section documents the mapping between new --dt- tokens and existing
   CSS variables. Consumers of the new token system should use the fallback
   pattern to maintain backward compatibility:
   
     var(--dt-bg-page, var(--page-bg, #f0f2f5))
     var(--dt-bg-surface, var(--surface-bg, #ffffff))
     var(--dt-text-primary, var(--text-main, #0a0f1a))
     var(--dt-text-secondary, var(--text-muted, #4a5568))
     var(--dt-accent-primary, var(--accent-main, #1f6feb))
     var(--dt-accent-success, var(--success, #059669))
     var(--dt-accent-danger, var(--danger, #dc2626))
     var(--dt-accent-warning, var(--warning, #d97706))
     var(--dt-border-default, var(--border-color, #e2e8f0))
     var(--dt-shadow-soft, var(--shadow-soft))
     var(--dt-shadow-medium, var(--shadow-medium))
     var(--dt-shadow-large, var(--shadow-large))
     var(--dt-radius-sm, var(--radius-small, 8px))
     var(--dt-radius-md, var(--radius-medium, 12px))
     var(--dt-radius-lg, var(--radius-large, 16px))
   
   IMPORTANT: Existing variables (--page-bg, --surface-bg, --accent-main, etc.)
   are NOT modified or overwritten. They remain defined in styles.css and
   admin.css. The --dt- namespace is completely separate.
   -------------------------------------------------------------------------- */