Calendar/app/wwwroot/css/design-system.css

/**
 * SWP Design System - CSS Variables
 *
 * Dette er den centrale definition af alle design tokens.
 * Alle farver, fonts og layout-variabler defineres her.
 */

/* ===========================================
   COLOR PALETTE - Light Mode (Default)
   =========================================== */
:root {
  /* Surfaces */
  --color-surface: #fff;
  --color-background: #f5f5f5;
  --color-background-hover: #f0f0f0;
  --color-background-alt: #fafafa;

  /* Borders */
  --color-border: #e0e0e0;
  --color-border-light: #f0f0f0;

  /* Text */
  --color-text: #333;
  --color-text-secondary: #666;
  --color-text-muted: #999;

  /* Brand Colors */
  --color-teal: #00897b;
  --color-teal-light: color-mix(in srgb, var(--color-teal) 10%, transparent);

  /* Semantic Colors */
  --color-blue: #1976d2;
  --color-green: #43a047;
  --color-amber: #f59e0b;
  --color-red: #e53935;
  --color-purple: #8b5cf6;
}

/* ===========================================
   COLOR PALETTE - Dark Mode (System)
   =========================================== */
@media (prefers-color-scheme: dark) {
  :root:not(.light-mode) {
    --color-surface: #1e1e1e;
    --color-background: #121212;
    --color-background-hover: #2a2a2a;
    --color-background-alt: #1a1a1a;

    --color-border: #333;
    --color-border-light: #2a2a2a;

    --color-text: #e0e0e0;
    --color-text-secondary: #999;
    --color-text-muted: #666;

    --color-teal: #26a69a;
    --color-blue: #42a5f5;
    --color-green: #66bb6a;
    --color-amber: #ffb74d;
    --color-red: #ef5350;
    --color-purple: #a78bfa;
  }
}

/* ===========================================
   COLOR PALETTE - Dark Mode (Manual)
   =========================================== */
:root.dark-mode {
  --color-surface: #1e1e1e;
  --color-background: #121212;
  --color-background-hover: #2a2a2a;
  --color-background-alt: #1a1a1a;

  --color-border: #333;
  --color-border-light: #2a2a2a;

  --color-text: #e0e0e0;
  --color-text-secondary: #999;
  --color-text-muted: #666;

  --color-teal: #26a69a;
  --color-blue: #42a5f5;
  --color-green: #66bb6a;
  --color-amber: #ffb74d;
  --color-red: #ef5350;
  --color-purple: #a78bfa;
}

/* ===========================================
   TYPOGRAPHY
   =========================================== */
:root {
  --font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Font Sizes */
  --font-size-xs: 11px;
  --font-size-sm: 12px;
  --font-size-base: 14px;
  --font-size-md: 13px;
  --font-size-lg: 16px;
  --font-size-xl: 22px;

  /* Line Heights */
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;
}

/* ===========================================
   SPACING
   =========================================== */
:root {
  --spacing-1: 4px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-5: 20px;
  --spacing-6: 24px;
  --spacing-8: 32px;
}

/* ===========================================
   LAYOUT
   =========================================== */
:root {
  --side-menu-width: 240px;
  --side-menu-width-collapsed: 64px;
  --topbar-height: 56px;
  --page-max-width: 1400px;
  --border-radius: 6px;
  --border-radius-lg: 8px;
}

/* ===========================================
   TRANSITIONS
   =========================================== */
:root {
  --transition-fast: 150ms ease;
  --transition-normal: 200ms ease;
  --transition-slow: 300ms ease;
}

/* ===========================================
   Z-INDEX LAYERS
   =========================================== */
:root {
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 900;
  --z-drawer: 1000;
  --z-modal: 1100;
  --z-tooltip: 1200;
}

/* ===========================================
   SHADOWS
   =========================================== */
:root {
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.15);
}