/* =====================================================
   D2L Tools Platform - Design Token System
   Single source of truth for all design primitives.
   Import this file FIRST in every page.
   ===================================================== */

:root {
    /* -------------------------------------------------
       COLORS - Brand & Primary Palette
       ------------------------------------------------- */
    --color-primary: #0d9488;
    --color-primary-dark: #0f766e;
    --color-primary-light: #14b8a6;
    --color-primary-subtle: #ccfbf1;

    --color-secondary: #6366f1;
    --color-secondary-dark: #4f46e5;

    /* -------------------------------------------------
       COLORS - Semantic / Status
       ------------------------------------------------- */
    --color-success: #22c55e;
    --color-success-bg: #dcfce7;
    --color-success-dark: #166534;
    --color-warning: #f59e0b;
    --color-warning-bg: #fef3c7;
    --color-warning-dark: #92400e;
    --color-error: #ef4444;
    --color-error-bg: #fee2e2;
    --color-error-dark: #b91c1c;
    --color-error-hover: #dc2626;
    --color-info: #3b82f6;
    --color-info-bg: #dbeafe;
    --color-info-dark: #1e40af;

    /* -------------------------------------------------
       COLORS - Neutral Backgrounds
       ------------------------------------------------- */
    --color-bg: #f8fafc;
    --color-bg-elevated: #ffffff;
    --color-bg-subtle: #f1f5f9;
    --color-bg-secondary: #f1f5f9;   /* alias for bg-subtle, used in tables/forms */
    --color-bg-tertiary: #e2e8f0;    /* deeper subtle background              */
    --color-bg-hover: #f1f5f9;       /* hover state background                */
    --color-bg-dark: #0f172a;
    --color-bg-sidebar: #1e293b;

    /* -------------------------------------------------
       COLORS - Text
       ------------------------------------------------- */
    --color-text: #1e293b;
    --color-text-primary: #1e293b;   /* alias for color-text                  */
    --color-text-secondary: #64748b;
    --color-text-muted: #94a3b8;
    --color-text-inverse: #f8fafc;

    /* -------------------------------------------------
       COLORS - Borders
       ------------------------------------------------- */
    --color-border: #e2e8f0;
    --color-border-subtle: #f1f5f9;

    /* -------------------------------------------------
       TYPOGRAPHY
       ------------------------------------------------- */
    --font-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

    --font-size-2xs: 0.5625rem;  /* 9px   - micro labels   */
    --font-size-xs: 0.625rem;    /* 10px  - badges, hints   */
    --font-size-sm: 0.75rem;     /* 12px  - captions        */
    --font-size-base: 0.875rem;  /* 14px  - body default    */
    --font-size-md: 1rem;        /* 16px  - inputs, buttons  */
    --font-size-lg: 1.125rem;    /* 18px  - subheadings      */
    --font-size-xl: 1.25rem;     /* 20px  - section titles   */
    --font-size-2xl: 1.5rem;     /* 24px  - page headings    */
    --font-size-3xl: 1.75rem;    /* 28px  - large headings   */
    --font-size-4xl: 2rem;       /* 32px  - hero / stat nums */

    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

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

    --letter-spacing-tight: -0.025em;
    --letter-spacing-wide: 0.05em;
    --letter-spacing-wider: 0.1em;

    /* -------------------------------------------------
       SPACING - 4px base scale
       ------------------------------------------------- */
    --space-0: 0;
    --space-px: 1px;
    --space-0-5: 0.125rem;  /* 2px  */
    --space-1: 0.25rem;     /* 4px  */
    --space-2: 0.5rem;      /* 8px  */
    --space-3: 0.75rem;     /* 12px */
    --space-4: 1rem;        /* 16px */
    --space-5: 1.25rem;     /* 20px */
    --space-6: 1.5rem;      /* 24px */
    --space-8: 2rem;        /* 32px */
    --space-10: 2.5rem;     /* 40px */
    --space-12: 3rem;       /* 48px */
    --space-16: 4rem;       /* 64px */

    /* Legacy spacing aliases (used throughout styles.css) */
    --spacing-xs: var(--space-1);   /* 4px  */
    --spacing-sm: var(--space-2);   /* 8px  */
    --spacing-md: var(--space-4);   /* 16px */
    --spacing-lg: var(--space-6);   /* 24px */
    --spacing-xl: var(--space-8);   /* 32px */
    --spacing-2xl: var(--space-12); /* 48px */

    /* -------------------------------------------------
       SHADOWS
       ------------------------------------------------- */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);

    /* -------------------------------------------------
       BORDER RADIUS
       ------------------------------------------------- */
    --radius-sm: 0.375rem;  /* 6px  */
    --radius-md: 0.5rem;    /* 8px  */
    --radius-lg: 0.75rem;   /* 12px */
    --radius-xl: 1rem;      /* 16px */
    --radius-full: 9999px;

    /* -------------------------------------------------
       TRANSITIONS
       ------------------------------------------------- */
    --transition-fast: 150ms ease;
    --transition-base: 200ms ease;
    --transition-normal: 250ms ease;
    --transition-slow: 300ms ease;

    /* -------------------------------------------------
       Z-INDEX SCALE
       ------------------------------------------------- */
    --z-base: 1;
    --z-dropdown: 100;
    --z-sidebar: 100;
    --z-sticky: 200;
    --z-modal-backdrop: 300;
    --z-modal: 400;
    --z-tooltip: 500;
    --z-toast: 1000;

    /* -------------------------------------------------
       LAYOUT
       ------------------------------------------------- */
    --sidebar-width: 280px;
    --sidebar-width-collapsed: 0px;
    --header-height: 64px;
    --max-content-width: 1400px;
    --content-padding: var(--space-8);

    /* Breakpoint values (reference only, use em in @media) */
    /* Mobile:  < 640px  = < 40em  */
    /* Tablet:  < 1024px = < 64em  */
    /* Desktop: >= 1024px           */
    /* Wide:    >= 1440px = >= 90em */
}