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

CTM PATH™ Guided Journey v6.0

Purpose
Design Tokens

Responsibility
• Color Palette
• Typography Tokens
• Layout Tokens
• Border Radius
• Shadows
• Animation Timing
• Z-Index

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

:root{

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

    --color-primary:#18A66D;

    --color-primary-hover:#24C980;

    --color-primary-dark:#10734E;

    --color-primary-soft:#4ADE97;

    --color-accent:#D9B56A;

    --color-accent-light:#EFD9A8;

    --color-accent-dark:#A57B2D;

    --color-accent-soft:#F8ECD2;

    --color-white:#FFFFFF;

    --color-black:#000000;


    /*==================================================
    Premium Background Palette
    ==================================================*/

    --bg-page:#06101C;

    --bg-page-top:#12315D;

    --bg-page-middle:#0B1E39;

    --bg-page-bottom:#03070E;

    --bg-surface:#0D192A;

    --bg-surface-light:#142741;

    --bg-card:rgba(18,29,48,.88);

    --bg-card-hover:rgba(25,39,61,.94);

    --bg-overlay:rgba(0,0,0,.72);

    --bg-button:#177B52;

    --bg-button-hover:#1E9663;

    --bg-button-active:#126947;

    --bg-divider:rgba(217,181,106,.18);


    /*==================================================
    Hero Background Lighting
    ==================================================*/

    --hero-glow:

        radial-gradient(

            ellipse at center,

            rgba(45,88,150,.24) 0%,

            rgba(24,55,96,.14) 28%,

            rgba(8,18,34,.05) 58%,

            transparent 82%

        );

    --hero-overlay:

        linear-gradient(

            180deg,

            rgba(255,255,255,.02) 0%,

            rgba(255,255,255,0) 100%

        );


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

    --text-primary:#FAF8F2;

    --text-secondary:#E8E3D9;

    --text-muted:#B8C0CB;

    --text-subtle:#8D97A8;

    --text-hero:#FFFDFC;

    --text-inverse:#09111B;

    --text-gold:#D9B56A;

    --text-gold-light:#EFD9A8;

    --text-gold-dark:#A57B2D;

    --text-green:#5CDD98;


    /*==================================================
    Borders
    ==================================================*/

    --border-light:rgba(255,255,255,.08);

    --border-medium:rgba(255,255,255,.14);

    --border-strong:rgba(255,255,255,.22);

    --border-gold:rgba(217,181,106,.35);

    --border-gold-soft:rgba(217,181,106,.18);

    --border-green:rgba(24,166,109,.35);

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

    --shadow-xs:

        0 4px 10px rgba(0,0,0,.18);

    --shadow-sm:

        0 10px 24px rgba(0,0,0,.24);

    --shadow-md:

        0 22px 48px rgba(0,0,0,.38);

    --shadow-lg:

        0 36px 82px rgba(0,0,0,.56);

    --shadow-xl:

        0 60px 140px rgba(0,0,0,.72);

    --shadow-soft:

        0 8px 24px rgba(0,0,0,.18);

    --shadow-floating:

        0 30px 80px rgba(0,0,0,.42);

    --shadow-hero:

        0 60px 140px rgba(0,0,0,.62);

    --shadow-logo:

        0 24px 70px rgba(0,0,0,.55);

    --shadow-gold:

        0 0 30px rgba(217,181,106,.18);

    --shadow-gold-lg:

        0 0 60px rgba(217,181,106,.10);

    --shadow-green:

        0 0 24px rgba(24,166,109,.22);

    --shadow-button:

        0 16px 40px rgba(18,104,70,.34);


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

    --radius-xs:6px;

    --radius-sm:12px;

    --radius-md:18px;

    --radius-lg:28px;

    --radius-xl:40px;

    --radius-card:30px;

    --radius-hero:52px;

    --radius-button:999px;

    --radius-round:999px;


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

    --font-primary:

        "Segoe UI",

        "Noto Sans Tamil",

        sans-serif;

    --font-display:

        "Cormorant Garamond",

        "Playfair Display",

        Georgia,

        serif;

    --font-ui:

        "Segoe UI",

        "Inter",

        Arial,

        sans-serif;

    --font-size-xs:.75rem;

    --font-size-sm:.90rem;

    --font-size-md:1rem;

    --font-size-lg:1.25rem;

    --font-size-xl:2rem;

    --font-size-2xl:2.75rem;

    --font-size-3xl:3.5rem;

    --font-size-hero:4.8rem;

    --font-size-hero-large:5.4rem;

    --font-size-display:5.75rem;

    --font-size-display-large:6.5rem;

    --font-weight-light:300;

    --font-weight-regular:400;

    --font-weight-medium:500;

    --font-weight-semibold:600;

    --font-weight-bold:700;

    --letter-ultra-tight:-0.04em;

    --letter-heading:-0.03em;

    --letter-tight:-0.02em;

    --letter-normal:0;

    --letter-wide:.04em;

    --letter-button:.06em;

    --letter-display:.08em;

    --letter-caption:.12em;

    --line-display:1.08;

    --line-heading:1.18;

    --line-tight:1.15;

    --line-normal:1.45;

    --line-body:1.72;

    --line-relaxed:1.70;

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

    --space-0:0;

    --space-1:8px;

    --space-2:16px;

    --space-3:24px;

    --space-4:32px;

    --space-5:48px;

    --space-6:64px;

    --space-7:96px;

    --space-8:120px;

    --space-9:160px;

    --space-10:200px;

    --space-11:240px;

    --space-12:300px;


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

    --logo-width:140px;

    --logo-width-large:180px;

    --hero-content-width:700px;

    --hero-max-width:940px;

    --hero-width:940px;

    --hero-section-gap:84px;

    --hero-logo-gap:84px;

    --hero-title-gap:40px;

    --hero-copy-gap:72px;

    --hero-button-gap:96px;

    --hero-divider-width:260px;


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

    --container-width:1280px;

    --container-wide:1480px;

    --content-width:980px;

    --content-narrow:720px;

    --content-wide:1180px;

    --header-height:96px;

    --screen-min-height:100vh;


    /*==================================================
    Motion
    ==================================================*/

    --speed-fast:.25s;

    --speed-normal:.40s;

    --speed-slow:.70s;

    --speed-extra:1.2s;

    --speed-cinematic:1.8s;

    --speed-ultra:2.4s;

    --ease:cubic-bezier(.22,.61,.36,1);

    --ease-soft:cubic-bezier(.19,1,.22,1);

    --ease-premium:cubic-bezier(.16,1,.30,1);

    --ease-cinematic:cubic-bezier(.19,1,.22,1);

    /*==================================================
    Opacity
    ==================================================*/

    --opacity-disabled:.45;

    --opacity-muted:.70;

    --opacity-soft:.90;

    --opacity-overlay:.96;

    --opacity-glass:.88;


    /*==================================================
    Blur
    ==================================================*/

    --blur-xs:4px;

    --blur-sm:8px;

    --blur-md:16px;

    --blur-lg:24px;

    --blur-xl:40px;


    /*==================================================
    Hero Depth
    ==================================================*/

    --hero-glow-size:900px;

    --hero-spotlight-size:620px;

    --hero-vignette-strength:.32;


    /*==================================================
    Dividers
    ==================================================*/

    --divider-width:260px;

    --divider-width-small:180px;

    --divider-height:1px;


    /*==================================================
    Button Tokens
    ==================================================*/

    --button-height:64px;

    --button-height-mobile:56px;

    --button-padding-x:48px;

    --button-padding-y:20px;


    /*==================================================
    Card Tokens
    ==================================================*/

    --card-padding:32px;

    --card-padding-mobile:24px;

    --card-gap:24px;


    /*==================================================
    Z Index
    ==================================================*/

    --z-base:1;

    --z-background:2;

    --z-content:10;

    --z-header:100;

    --z-floating:200;

    --z-overlay:500;

    --z-modal:1000;

    --z-toast:1100;

    --z-tooltip:1200;

}