/* Design tokens - IMS Booking (tema: Kolig graa). Portable across IMS / CMS / IMSProjekt.
   Alle farver i base.css/app.css laeses herfra som var(--token). */

:root {
    --color-brand-navy: #0f2849;
    --color-brand-navy-hover: #1a3a5f;
    --color-brand-navy-active: #081a33;
    --color-brand-tint: #eaf0fa;
    --color-brand-tint-2: #eef2f8;
    --sidebar-bg: #0b1f3a;
    --sidebar-text: rgba(255, 255, 255, 0.72);
    --sidebar-text-strong: #ffffff;
    --sidebar-hover: rgba(255, 255, 255, 0.06);
    --sidebar-active: rgba(255, 255, 255, 0.10);
    --sidebar-section: rgba(255, 255, 255, 0.4);
    --sidebar-divider: rgba(255, 255, 255, 0.08);
    --color-bg: #f5f6f8;
    --color-card: #ffffff;
    --color-card-alt: #fafbfc;
    --surface-hover: #f0f2f5;
    --surface-sunken: #e9ecf1;
    --color-border: #e1e4ea;
    --border-subtle: #e6e8ec;
    --color-border-strong: #c9cfda;
    --color-text: #1f2733;
    --color-text-muted: #5d6878;
    --color-text-faint: #646e80;
    --color-text-inverse: #ffffff;
    --color-accent: #2f6fd6;
    --color-accent-hover: #255db8;
    --focus-ring-color: rgba(59, 126, 229, 0.25);
    --color-info: #2f6fd6;
    --color-info-bg: #e8f0fc;
    --color-info-text: #2959a8;
    --color-info-tint: #f1f5fc;
    --color-info-border: #d5e2f6;
    --color-success: #2e7d5b;
    --color-success-bg: #e8f4ed;
    --color-success-text: #1f5e43;
    --color-success-tint: #eaf6ef;
    --color-success-border: #cde8d9;
    --color-warning: #c77a1f;
    --color-warning-bg: #fbf1e3;
    --color-warning-text: #8f530a;
    --color-warning-tint: #fffaf2;
    --color-warning-border: #f1d9b5;
    --color-warning-border-strong: #ebcb9d;
    --color-breadcrumb-accent: #c77a1f;
    --color-breadcrumb-accent-hover: #a8651a;
    --color-danger: #c13838;
    --color-danger-bg: #fcebeb;
    --color-danger-text: #9b2c2c;
    --color-danger-text-strong: #a12e2e;
    --color-danger-tint: #fff6f6;
    --color-danger-border: #f4c7c7;
    --color-danger-border-strong: #efb5b5;
    --status-draft-bg: #eceef2;
    --status-draft-text: #566173;
    --status-closed-bg: #e4e7ec;
    --status-closed-text: #5a6474;
    --chip-batch-bg: #eef0fd;
    --chip-batch-text: #3b47a8;
    --portal-bg: #f5f6f8;
    --portal-border: #e6e8ec;
    --portal-divider: #eef0f3;
    --portal-card-alt: #fafbfc;
    --portal-tile-border: #e1e4ea;

    --shadow-xs: 0 1px 2px rgba(15, 40, 73, 0.05);
    --shadow-sm: 0 1px 2px rgba(15, 40, 73, 0.04), 0 1px 3px rgba(15, 40, 73, 0.06);
    --shadow-md: 0 2px 6px rgba(15, 40, 73, 0.06), 0 4px 12px rgba(15, 40, 73, 0.08);
    --shadow-lg: 0 4px 12px rgba(15, 40, 73, 0.08), 0 12px 24px rgba(15, 40, 73, 0.10);
    --shadow-pop: 0 1px 2px rgba(15, 40, 73, 0.06), 0 8px 24px rgba(15, 40, 73, 0.10);
    --shadow-card: 0 1px 2px rgba(15, 40, 73, 0.07), 0 5px 12px rgba(15, 40, 73, 0.10), 0 14px 30px rgba(15, 40, 73, 0.12);
    --shadow-card-hover: 0 2px 4px rgba(15, 40, 73, 0.08), 0 10px 22px rgba(15, 40, 73, 0.13), 0 22px 46px rgba(15, 40, 73, 0.16);
    --shadow-portal: 0 1px 2px rgba(15, 40, 73, 0.05), 0 12px 32px rgba(15, 40, 73, 0.08);
}

:root {
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-control: 8px;
    --radius-lg: 10px;
    --radius-card: 12px;
    --radius-portal: 16px;
    --radius-center: 18px;
    --radius-pill: 999px;
    --control-height: 38px;
    --sidebar-width: 248px;
    --content-max: 1280px;
    --topnav-height: 64px;
    --container-max: 1600px;
    --font-size-xs: 12px;
    --font-size-sm: 13px;
    --font-size-base: 14px;
    --font-size-lg: 16px;
    --font-size-xl: 20px;
    --font-size-2xl: 24px;
    --font-size-3xl: 28px;
    --font-size-4xl: 36px;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --line-height-tight: 1.2;
    --line-height-base: 1.5;
    --line-height-relaxed: 1.65;
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    --font-mono: Consolas, ui-monospace, 'SF Mono', Menlo, monospace;
    --focus-ring: 0 0 0 3px var(--focus-ring-color);
}