/**
 * design-tokens.css — Phase 0i
 * Platform-wide CSS custom property vocabulary.
 *
 * Depends on views/partials/branding-css.ejs being loaded first.
 * That partial supplies the 3 per-org branded tokens:
 *   --primary-color, --secondary-color, --accent-color
 *
 * This file:
 *  1. Aliases those branded tokens to --ds-brand-* for design-system consumers.
 *  2. Defines semantic color tokens (bg, surface, text, border, state, focus).
 *  3. Defines spacing, radii, shadow, typography, and z-index scales.
 *  4. Provides body.dark-mode overrides that flip neutral/semantic tokens only;
 *     brand tokens stay org-sourced in both modes.
 *
 * Token naming: --ds-{category}-{variant}
 * Dark mode: body.dark-mode { ... } overrides semantic tokens.
 */

/* ============================================================
   Brand aliases — map per-org tokens to ds-brand-* names
   (branding-css.ejs sets --primary-color / --secondary-color /
   --accent-color at runtime; these aliases always follow)
   ============================================================ */
:root {
  --ds-brand-primary:   var(--primary-color,   #1877f2);
  --ds-brand-secondary: var(--secondary-color, #166fe5);
  --ds-brand-accent:    var(--accent-color,    #e7f3ff);
}

/* ============================================================
   Semantic color tokens — light mode defaults
   ============================================================ */
:root {
  /* Backgrounds */
  --ds-bg-page:      #f9fafb;
  --ds-bg-surface:   #ffffff;
  --ds-bg-surface-2: #f3f4f6;

  /* Text */
  --ds-text-primary:   #111111;
  --ds-text-secondary: #374151;
  --ds-text-muted:     #6b7280;

  /* Borders */
  --ds-border-subtle: #e5e7eb;
  --ds-border-strong: #d1d5db;

  /* Focus ring — brand-derived (falls back to blue only if no tenant --primary-color) */
  --ds-focus-ring: color-mix(in srgb, var(--primary-color, #1877f2) 35%, transparent);
}

/* ============================================================
   State colors — info / success / warning / danger
   (stay consistent in light + dark; bg variants go translucent
    in dark mode via the body.dark-mode block below)
   ============================================================ */
:root {
  --ds-info:         #1877f2;
  --ds-info-bg:      #e7f3ff;
  --ds-info-border:  rgba(24, 119, 242, 0.3);
  --ds-info-text:    #1877f2;

  --ds-success:         #059669;
  --ds-success-bg:      #d1fae5;
  --ds-success-border:  rgba(5, 150, 105, 0.3);
  --ds-success-text:    #059669;

  --ds-warning:         #b45309;
  --ds-warning-bg:      #fef3c7;
  --ds-warning-border:  rgba(180, 83, 9, 0.3);
  --ds-warning-text:    #b45309;

  --ds-danger:         #dc2626;
  --ds-danger-bg:      #fee2e2;
  --ds-danger-border:  rgba(220, 38, 38, 0.3);
  --ds-danger-text:    #dc2626;

  --ds-attention:         #7c3aed;
  --ds-attention-bg:      #ede9fe;
  --ds-attention-border:  rgba(124, 58, 237, 0.3);
  --ds-attention-text:    #7c3aed;

  --ds-orange:         #c2410c;
  --ds-orange-bg:      #fdecdc;
  --ds-orange-border:  rgba(194, 65, 12, 0.3);
  --ds-orange-text:    #c2410c;
}

/* ============================================================
   Spacing scale (4-point grid)
   ============================================================ */
:root {
  --ds-spacing-xs:  4px;
  --ds-spacing-sm:  8px;
  --ds-spacing-md:  16px;
  --ds-spacing-lg:  24px;
  --ds-spacing-xl:  32px;
  --ds-spacing-2xl: 48px;
  --ds-spacing-3xl: 64px;
}

/* ============================================================
   Border-radius scale
   ============================================================ */
:root {
  --ds-radius-sm:   4px;
  --ds-radius-md:   8px;
  --ds-radius-lg:   12px;
  --ds-radius-card: 10px;
  --ds-radius-xl:   16px;
  --ds-radius-full: 9999px;
}

/* ============================================================
   Shadow scale
   ============================================================ */
:root {
  --ds-shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
  --ds-shadow-md: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
  --ds-shadow-card: 0 2px 10px rgba(0,0,0,0.1);
  --ds-shadow-lg: 0 6px 16px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.04);
  --ds-shadow-xl: 0 16px 40px rgba(0,0,0,0.12), 0 2px 6px rgba(0,0,0,0.06);
}

/* ============================================================
   Typography scale
   ============================================================ */
:root {
  /* Font sizes */
  --ds-text-xs:   12px;
  --ds-text-sm:   14px;
  --ds-text-base: 16px;
  --ds-text-lg:   18px;
  --ds-text-xl:   20px;
  --ds-text-2xl:  24px;
  --ds-text-3xl:  30px;

  /* Font weights */
  --ds-weight-normal:   400;
  --ds-weight-medium:   500;
  --ds-weight-semibold: 600;
  --ds-weight-bold:     700;

  /* Line heights */
  --ds-leading-tight:   1.2;
  --ds-leading-normal:  1.5;
  --ds-leading-relaxed: 1.75;
}

/* ============================================================
   Z-index scale
   ============================================================ */
:root {
  --ds-z-rail:    100;
  --ds-z-topbar:  200;
  --ds-z-dropdown: 300;
  --ds-z-modal:   400;
  --ds-z-toast:   500;
}

/* ============================================================
   Dark mode — flip semantic tokens; brand + state stay.
   ============================================================ */
body.dark-mode {
  /* Backgrounds — mirror the app's --cc13-* dark palette. Fallbacks equal the
     --cc13-* dark values (platform-chrome.css) so mobile — which does NOT load
     platform-chrome.css — resolves these correctly instead of collapsing to
     empty. Web has --cc13-* defined, so the fallback is never used there. */
  --ds-bg-page:       var(--cc13-paper-2, color-mix(in srgb, var(--primary-color) 8%, #060606));
  --ds-bg-surface:    var(--cc13-paper,   color-mix(in srgb, var(--primary-color) 15%, #0a0a0a));
  --ds-bg-surface-2:  var(--cc13-paper-3, color-mix(in srgb, var(--primary-color) 22%, #1a1a1a));

  /* Text — mirror the app's --cc13-* dark palette (fallbacks = --cc13-* darks) */
  --ds-text-primary:   var(--cc13-ink,   #f1f5f9);
  --ds-text-secondary: var(--cc13-ink-2, #cbd5e1);
  --ds-text-muted:     var(--cc13-ink-3, #94a3b8);

  /* Borders — mirror the app's --cc13-* dark palette (fallbacks = --cc13-* darks) */
  --ds-border-subtle: var(--cc13-border,   #334155);
  --ds-border-strong: var(--cc13-border-2, #475569);

  /* Focus ring stronger on dark for visibility (still brand-derived) */
  --ds-focus-ring: color-mix(in srgb, var(--primary-color, #1877f2) 45%, transparent);

  /* State bg variants go translucent on dark cards */
  --ds-info-bg:     rgba(24, 119, 242, 0.15);
  --ds-success-bg:  rgba(5, 150, 105, 0.22);
  --ds-warning-bg:  rgba(180, 83, 9, 0.28);
  --ds-danger-bg:     rgba(220, 38, 38, 0.22);
  --ds-attention-bg:  rgba(124, 58, 237, 0.22);
  --ds-orange-bg:     rgba(194, 65, 12, 0.18);

  /* State -text variants lighten for contrast on dark surfaces */
  --ds-info-text:      #60a5fa;
  --ds-success-text:   #34d399;
  --ds-warning-text:   #fbbf24;
  --ds-danger-text:    #f87171;
  --ds-attention-text: #a78bfa;
  --ds-orange-text:    #fb923c;

  /* Shadows deepen in dark mode */
  --ds-shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
  --ds-shadow-md: 0 2px 6px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3);
  --ds-shadow-card: 0 2px 12px rgba(0,0,0,0.5);
  --ds-shadow-lg: 0 8px 20px rgba(0,0,0,0.5), 0 1px 3px rgba(0,0,0,0.3);
  --ds-shadow-xl: 0 20px 50px rgba(0,0,0,0.6), 0 2px 8px rgba(0,0,0,0.4);

  color-scheme: dark;
}

/* Accent-color override — light-mode accent is a pale tint that reads
   poorly on dark card backgrounds; override to a translucent primary. */
body.dark-mode {
  --ds-brand-accent: color-mix(in srgb, var(--primary-color, #1877f2) 22%, transparent);
  --accent-color:    color-mix(in srgb, var(--primary-color, #1877f2) 22%, transparent);
}