/* ========================================
   ICDL IMS — Design System
   CSS Custom Properties (Single Source of Truth)
   Created: 2026-03-16
   ======================================== */

:root {
    /* === Brand Colors === */
    --color-primary: #003366;          /* Navy — headings, headers, nav */
    --color-primary-light: #004d99;    /* Navy light — hover states */
    --color-primary-dark: #002244;     /* Navy dark — active states */

    --color-accent: #0091d1;           /* Cyan — buttons, links, dividers */
    --color-accent-light: #33a8db;     /* Cyan light — hover */
    --color-accent-dark: #007ab8;      /* Cyan dark — active */

    /* === Semantic Colors === */
    --color-success: #28a745;
    --color-success-dark: #218838;
    --color-danger: #dc3545;
    --color-danger-dark: #c82333;
    --color-warning: #ffc107;
    --color-warning-dark: #e0a800;
    --color-info: #17a2b8;

    /* === Neutral Colors === */
    --color-text-primary: #333333;
    --color-text-secondary: #666666;
    --color-text-muted: #999999;
    --color-text-inverse: #ffffff;

    --color-bg-body: #ffffff;
    --color-bg-page-start: #e8f4fb;
    --color-bg-page-mid: #f0f4f8;
    --color-bg-page-end: #ffffff;
    --color-bg-card: #f8fafb;
    --color-bg-header: #ffffff;
    --color-bg-footer: #003366;
    --color-bg-table-header: #003366;
    --color-bg-table-stripe: #f9fbfd;
    --color-bg-table-hover: #edf5fb;
    --color-bg-input-focus: rgba(0, 145, 209, 0.15);

    --color-border: #dce5ed;
    --color-border-light: #e8eef3;
    --color-border-accent: #0091d1;

    /* === Typography === */
    --font-brand: 'SVN-MarkPro', arial, "Segoe UI", Verdana, Helvetica, sans-serif;
    --font-body: 'SVN-MarkPro', arial, "Segoe UI", Verdana, Helvetica, sans-serif;
    --font-mono: 'Consolas', 'Courier New', monospace;

    --font-size-xs: 11px;
    --font-size-sm: 13px;
    --font-size-base: 14px;
    --font-size-md: 15px;
    --font-size-lg: 17px;
    --font-size-xl: 20px;
    --font-size-2xl: 24px;
    --font-size-3xl: 28px;

    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-book: 450;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-heavy: 800;
    --font-weight-black: 900;

    --line-height-tight: 1.2;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;

    /* === Spacing Scale === */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 12px;
    --space-base: 16px;
    --space-lg: 20px;
    --space-xl: 24px;
    --space-2xl: 32px;
    --space-3xl: 48px;

    /* === Borders & Radius === */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 20px;
    --radius-full: 9999px;

    /* === Shadows === */
    --shadow-xs: 0 1px 2px rgba(0, 51, 102, 0.04);
    --shadow-sm: 0 1px 6px rgba(0, 51, 102, 0.06);
    --shadow-md: 0 4px 12px rgba(0, 51, 102, 0.08);
    --shadow-lg: 0 8px 24px rgba(0, 51, 102, 0.12);
    --shadow-xl: 0 12px 40px rgba(0, 51, 102, 0.15);
    --shadow-accent: 0 2px 8px rgba(0, 145, 209, 0.25);
    --shadow-accent-hover: 0 4px 12px rgba(0, 51, 102, 0.3);
    --shadow-danger: 0 2px 8px rgba(220, 53, 69, 0.25);

    /* === Transitions === */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
    --transition-slow: 350ms ease;

    /* === Layout === */
    --header-height: 65px;
    --navbar-height: 50px;
    --footer-height: 60px;
    --container-max-width: 1200px;
    --content-padding-bottom: 90px;
}