/**
 * Design Tokens / Variables
 *
 * @package TATC
 */

:root {
    /* -----------------------------------------
       Colors
       ----------------------------------------- */
	--color-temp-navy: #020811;

    --color-primary: #0B3A6E;
    --color-blue: #1E5AA8;
    --color-accent: #3FA9F5;
    --color-light-blue: #D8EEFF;

    --color-slate: #4B5563;
    --color-white: #FFFFFF;
	
	--color-primary: #031633;
	--color-blue: #2A75E6;
	--color-accent: #D8A94B;

	--color-light-blue: #DDE2E7;

	--color-slate: #7F8894;
	--color-white: #FFFFFF;


    /* -----------------------------------------
       Semantic Colors
       ----------------------------------------- */

    --color-text: var(--color-slate);
    --color-heading: var(--color-primary);
    --color-link: var(--color-blue);
    --color-link-hover: var(--color-accent);

    --color-background: var(--color-white);
    --color-background-alt: var(--color-light-blue);

    --color-border: color-mix(
    in srgb,
    var(--color-primary) 15%,
    transparent
    );


    /* -----------------------------------------
       Layout
       ----------------------------------------- */

    --container-width: 1280px;
    --container-padding: 2rem;

    --section-spacing: 7rem;
    --section-spacing-small: 4rem;


    /* -----------------------------------------
       Borders / Radius
       ----------------------------------------- */

    --border-radius-small: 0.25rem;
    --border-radius: 0.5rem;
    --border-radius-large: 1rem;


    /* -----------------------------------------
       Transitions
       ----------------------------------------- */

    --transition-fast: 0.2s ease;
    --transition: 0.3s ease;
    --transition-slow: 0.5s ease;


    /* -----------------------------------------
       Shadows
       ----------------------------------------- */

    --shadow-small: 0 2px 8px rgba(11, 58, 110, 0.08);
    --shadow: 0 8px 24px rgba(11, 58, 110, 0.10);
    --shadow-large: 0 16px 40px rgba(11, 58, 110, 0.12);
}