PlanTempusApp/PlanTempus.Application/wwwroot/css/design-tokens.css

/**
 * SWP Design System - Unified Design Tokens
 *
 * Konsolideret fra Calendar POC og PlanTempus Application
 * Brug disse tokens konsistent på tværs af alle projekter.
 */

/* ===========================================
   COLOR PALETTE - Light Mode (Default)
   =========================================== */
:root {
  /* -------- Surfaces & Backgrounds -------- */
  --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;

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

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

  /* -------- Team/Resource -------- */
  --color-team-bg: #e3f2fd;
  --color-team-text: #1565c0;

  /* -------- Grid Lines -------- */
  --color-hour-line: rgba(0, 0, 0, 0.2);
  --color-grid-line-light: rgba(0, 0, 0, 0.05);
  --color-unavailable: rgba(0, 0, 0, 0.02);
}

/* ===========================================
   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 Toggle)
   =========================================== */
: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;
}

/* ===========================================
   EVENT COLOR PALETTE (18 Colors)
   =========================================== */
:root {
  --b-color-red: #e53935;
  --b-color-pink: #d81b60;
  --b-color-magenta: #c200c2;
  --b-color-purple: #8e24aa;
  --b-color-violet: #5e35b1;
  --b-color-deep-purple: #4527a0;
  --b-color-indigo: #3949ab;
  --b-color-blue: #1e88e5;
  --b-color-light-blue: #03a9f4;
  --b-color-cyan: #3bc9db;
  --b-color-teal: #00897b;
  --b-color-green: #43a047;
  --b-color-light-green: #8bc34a;
  --b-color-lime: #c0ca33;
  --b-color-yellow: #fdd835;
  --b-color-amber: #ffb300;
  --b-color-orange: #fb8c00;
  --b-color-deep-orange: #f4511e;

  /* For color-mix calculations */
  --b-mix: #fff;
}

/* ===========================================
   TYPOGRAPHY
   =========================================== */
:root {
  /* -------- Font Families -------- */
  --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-md: 13px;
  --font-size-base: 14px;
  --font-size-lg: 16px;
  --font-size-xl: 18px;
  --font-size-2xl: 20px;
  --font-size-3xl: 22px;

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

  /* -------- Line Heights -------- */
  --line-height-tight: 1.25;
  --line-height-snug: 1.3;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.6;
}

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

/* ===========================================
   LAYOUT
   =========================================== */
:root {
  /* -------- Sidebars & Navigation -------- */
  --side-menu-width: 240px;
  --side-menu-width-collapsed: 64px;
  --topbar-height: 56px;

  /* -------- Content Containers -------- */
  --page-max-width: 1400px;
  --container-max-width-sm: 900px;
  --container-max-width-md: 1200px;
  --container-max-width-lg: 1400px;

  /* -------- Card Spacing -------- */
  --card-padding: 12px;
  --card-gap: 24px;
  --section-gap: 24px;
  --page-padding: 24px;

  /* -------- Calendar Grid -------- */
  --hour-height: 64px;
  --time-axis-width: 60px;
  --grid-columns: 7;
  --day-column-min-width: 200px;
  --day-start-hour: 6;
  --day-end-hour: 18;
  --header-height: 70px;
}

/* ===========================================
   BORDERS & RADIUS
   =========================================== */
:root {
  /* -------- Border Radius -------- */
  --radius-sm: 3px;
  --radius-md: 4px;
  --radius-lg: 6px;
  --radius-xl: 8px;
  --radius-2xl: 12px;
  --radius-pill: 20px;
  --radius-full: 50%;

  /* Legacy aliases */
  --border-radius: 6px;
  --border-radius-lg: 8px;
}

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

  /* Specific use-cases */
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-dropdown: 0 4px 12px rgba(0, 0, 0, 0.15);
  --shadow-drawer: 0 4px 20px rgba(0, 0, 0, 0.1);
  --shadow-dragging: 0 4px 12px rgba(0, 0, 0, 0.15);
}

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

  /* Specific timing functions */
  --ease-out: ease-out;
  --ease-in-out: ease-in-out;
  --ease-spring: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===========================================
   Z-INDEX LAYERS
   =========================================== */
:root {
  --z-base: 1;
  --z-grid: 2;
  --z-event: 10;
  --z-event-hover: 20;
  --z-resize-handle: 25;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 900;
  --z-drawer: 1000;
  --z-modal: 1100;
  --z-tooltip: 1200;
  --z-dragging: 999999;
}

/* ===========================================
   BREAKPOINTS (as CSS custom properties)
   For reference - use @media queries in CSS
   =========================================== */
/*
  --breakpoint-sm: 600px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1100px;
  --breakpoint-2xl: 1400px;
*/

/* ===========================================
   UTILITY CLASSES - Event Colors
   =========================================== */
.is-red { --b-primary: var(--b-color-red); }
.is-pink { --b-primary: var(--b-color-pink); }
.is-magenta { --b-primary: var(--b-color-magenta); }
.is-purple { --b-primary: var(--b-color-purple); }
.is-violet { --b-primary: var(--b-color-violet); }
.is-deep-purple { --b-primary: var(--b-color-deep-purple); }
.is-indigo { --b-primary: var(--b-color-indigo); }
.is-blue { --b-primary: var(--b-color-blue); }
.is-light-blue { --b-primary: var(--b-color-light-blue); }
.is-cyan { --b-primary: var(--b-color-cyan); }
.is-teal { --b-primary: var(--b-color-teal); }
.is-green { --b-primary: var(--b-color-green); }
.is-light-green { --b-primary: var(--b-color-light-green); }
.is-lime { --b-primary: var(--b-color-lime); }
.is-yellow { --b-primary: var(--b-color-yellow); }
.is-amber { --b-primary: var(--b-color-amber); }
.is-orange { --b-primary: var(--b-color-orange); }
.is-deep-orange { --b-primary: var(--b-color-deep-orange); }

/* ===========================================
   UTILITY CLASSES - Status Badges
   =========================================== */
.status-confirmed { background: color-mix(in srgb, var(--color-green) 15%, transparent); color: var(--color-green); }
.status-pending { background: color-mix(in srgb, var(--color-amber) 15%, transparent); color: var(--color-amber); }
.status-inprogress { background: color-mix(in srgb, var(--color-blue) 15%, transparent); color: var(--color-blue); }
.status-error { background: color-mix(in srgb, var(--color-red) 15%, transparent); color: var(--color-red); }
.status-active { background: color-mix(in srgb, var(--color-green) 15%, transparent); color: var(--color-green); }
.status-inactive { background: var(--color-background); color: var(--color-text-muted); }