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

    CTM PATH™
    FROM SURVIVAL TO LIVING™

    FILE
    tokens.css

    PURPOSE

    Global Design Tokens

    RESPONSIBILITIES

    • Colours
    • Typography
    • Spacing
    • Border Radius
    • Shadows
    • Animations
    • Z-Index

    NOTE

    NO CSS CLASSES HERE.

    VARIABLES ONLY.

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

:root{

/*=============================================================================
    BRAND COLOURS
=============================================================================*/

    --color-primary:

        #081C3A;

    --color-primary-light:

        #10356A;

    --color-primary-dark:

        #06152C;

    --color-surface:

        #0F2D5C;

    --color-surface-hover:

        #153B74;


/*=============================================================================
    BRAND ACCENTS
=============================================================================*/

    --color-gold:

        #D8B04C;

    --color-gold-light:

        #E5C56F;

    --color-gold-dark:

        #B68E2D;

    --color-teal:

        #33C3C8;


/*=============================================================================
    TEXT
=============================================================================*/

    --color-white:

        #F8F4EA;

    --color-text:

        #F8F4EA;

    --color-text-secondary:

        rgba(248,244,234,.75);

    --color-text-muted:

        rgba(248,244,234,.55);


/*=============================================================================
    STATUS COLOURS
=============================================================================*/

    --color-danger:

        #D9534F;

    --color-warning:

        #F0AD4E;

    --color-success:

        #28C76F;

    --color-info:

        #4DA3FF;


/*=============================================================================
    BACKGROUNDS
=============================================================================*/

    --background-body:

        #081C3A;

    --background-card:

        #10356A;

    --background-panel:

        #123D73;


/*=============================================================================
    BORDERS
=============================================================================*/

    --border-color:

        rgba(216,176,76,.20);

    --border-color-active:

        rgba(216,176,76,.45);


/*=============================================================================
    TYPOGRAPHY
=============================================================================*/

    --font-primary:

        "Inter",
        sans-serif;

    --font-secondary:

        "Noto Sans Tamil",
        sans-serif;

    --font-mono:

        monospace;


/*=============================================================================
    FONT SIZES
=============================================================================*/

    --font-xs:

        .75rem;

    --font-sm:

        .875rem;

    --font-md:

        1rem;

    --font-lg:

        1.25rem;

    --font-xl:

        1.5rem;

    --font-2xl:

        2rem;

    --font-3xl:

        2.5rem;

    --font-4xl:

        3rem;


/*=============================================================================
    FONT WEIGHTS
=============================================================================*/

    --weight-light:

        300;

    --weight-normal:

        400;

    --weight-medium:

        500;

    --weight-semibold:

        600;

    --weight-bold:

        700;

    --weight-extrabold:

        800;


/*=============================================================================
    SPACING
=============================================================================*/

    --space-1:

        4px;

    --space-2:

        8px;

    --space-3:

        12px;

    --space-4:

        16px;

    --space-5:

        20px;

    --space-6:

        24px;

    --space-8:

        32px;

    --space-10:

        40px;

    --space-12:

        48px;

    --space-16:

        64px;


/*=============================================================================
    BORDER RADIUS
=============================================================================*/

    --radius-sm:

        6px;

    --radius-md:

        12px;

    --radius-lg:

        18px;

    --radius-xl:

        24px;

    --radius-round:

        999px;


/*=============================================================================
    SHADOWS
=============================================================================*/

    --shadow-sm:

        0 2px 8px rgba(0,0,0,.15);

    --shadow-md:

        0 8px 20px rgba(0,0,0,.25);

    --shadow-lg:

        0 16px 40px rgba(0,0,0,.35);

    --shadow-gold:

        0 0 20px rgba(216,176,76,.35);


/*=============================================================================
    TRANSITIONS
=============================================================================*/

    --transition-fast:

        .15s ease;

    --transition-normal:

        .30s ease;

    --transition-slow:

        .50s ease;


/*=============================================================================
    LAYOUT
=============================================================================*/

    --header-height:

        88px;

    --content-width:

        1280px;

    --page-padding:

        32px;


/*=============================================================================
    Z-INDEX
=============================================================================*/

    --z-base:

        1;

    --z-dropdown:

        100;

    --z-modal:

        1000;

    --z-loader:

        9999;

}