/*
====================================================

The Resource Hub
Patient Access Center Learning Resource Hub

File:
variables.css

Version:
1.0 Alpha

Sprint:
2.1

Story:
TRH-001B

Description:
Global Design Tokens

====================================================
*/

:root {

    /* ==================================================
       Brand Colors
    ================================================== */

    --color-primary: #4B1F8A;
    --color-primary-dark: #31105E;
    --color-accent: #CDB7F6;

    /* ==================================================
       Backgrounds
    ================================================== */

    --color-background: #FFFFFF;
    --color-surface: #F7F4FC;
    --color-border: #E6DFF4;

    /* ==================================================
       Text
    ================================================== */

    --color-text: #2E2E2E;
    --color-text-light: #666666;
    --color-text-inverse: #FFFFFF;

    /* ==================================================
       Status
    ================================================== */

    --color-success: #2E8540;
    --color-warning: #C67A00;
    --color-error: #B50909;
    --color-info: #0066CC;

    /* ==================================================
       Typography
    ================================================== */

    --font-family:
        "Segoe UI",
        Arial,
        Helvetica,
        sans-serif;

    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-md: 1rem;
    --font-size-lg: 1.25rem;
    --font-size-xl: 1.75rem;
    --font-size-xxl: 2.5rem;

    /* ==================================================
       Font Weight
    ================================================== */

    --font-light: 300;
    --font-normal: 400;
    --font-medium: 500;
    --font-bold: 700;

    /* ==================================================
       Spacing
    ================================================== */

    --space-xs: .25rem;
    --space-sm: .5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-xxl: 3rem;

    /* ==================================================
       Border Radius
    ================================================== */

    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;
    --radius-xl: 24px;

    /* ==================================================
       Shadows
    ================================================== */

    --shadow-sm:
        0 1px 3px rgba(0,0,0,.08);

    --shadow-md:
        0 4px 8px rgba(0,0,0,.10);

    --shadow-lg:
        0 8px 20px rgba(0,0,0,.12);

    /* ==================================================
       Layout
    ================================================== */

    --header-height: 72px;

    --sidebar-width: 280px;

    --content-max-width: 1600px;

    /* ==================================================
       Animation
    ================================================== */

    --transition-fast: .2s ease;

    --transition-normal: .3s ease;

}