/* ==========================================================================
   CTM PATH™ Guided Journey™

   File        : theme.css
   Version     : 1.0
   Status      : DEVELOPMENT
   Stage       : STAGE 0 — FOUNDATION

   Purpose     :
   Defines the complete visual identity system for the
   CTM PATH™ Guided Journey™ application.

   Responsibilities:

   • Brand colors
   • Typography tokens
   • Surface system
   • Border system
   • Shadow system
   • Visual emphasis hierarchy

   Does NOT contain:

   • Layout rules
   • Responsive rules
   • Page-specific components

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



/* ==========================================================================
   DESIGN TOKENS
   ========================================================================== */


:root {


    /* ----------------------------------------------------------------------
       BRAND COLOR SYSTEM

       Premium transformation experience.

       ------------------------------------------------------------------- */


    --ctm-deep-charcoal:

        #181A1F;


    --ctm-charcoal-light:

        #23262D;


    --ctm-surface:

        #242831;


    --ctm-surface-elevated:

        #2C3039;



    /* Primary Brand Accent */


    --ctm-teal:

        #0FA3B1;


    --ctm-teal-light:

        #39C6D4;


    --ctm-teal-dark:

        #087681;



    /* Premium Accent */


    --ctm-muted-gold:

        #C6A15B;


    --ctm-muted-gold-light:

        #D9BC7A;


    --ctm-muted-gold-dark:

        #9B773A;



    /* Text System */


    --ctm-ivory:

        #F6F1E8;


    --ctm-white:

        #FFFFFF;


    --ctm-text-primary:

        #F6F1E8;


    --ctm-text-secondary:

        #B7BBC5;


    --ctm-text-muted:

        #858B98;



    /* Status Colors */


    --ctm-success:

        #4CAF78;


    --ctm-warning:

        #D89B3C;


    --ctm-error:

        #D85C5C;



    /* ----------------------------------------------------------------------
       TYPOGRAPHY SYSTEM
       ------------------------------------------------------------------- */


    --font-primary:

        "Inter",
        "Segoe UI",
        Arial,
        sans-serif;


    --font-heading:

        "Inter",
        "Segoe UI",
        Arial,
        sans-serif;



    --weight-regular:

        400;


    --weight-medium:

        500;


    --weight-semibold:

        600;


    --weight-bold:

        700;



    /* ----------------------------------------------------------------------
       FONT SCALE
       ------------------------------------------------------------------- */


    --text-xs:

        0.75rem;


    --text-sm:

        0.875rem;


    --text-base:

        1rem;


    --text-lg:

        1.125rem;


    --text-xl:

        1.25rem;


    --text-2xl:

        1.5rem;


    --text-3xl:

        2rem;


    --text-4xl:

        2.75rem;


    --text-5xl:

        3.5rem;



    /* ----------------------------------------------------------------------
       SPACING SYSTEM
       ------------------------------------------------------------------- */


    --space-1:

        0.25rem;


    --space-2:

        0.5rem;


    --space-3:

        0.75rem;


    --space-4:

        1rem;


    --space-5:

        1.25rem;


    --space-6:

        1.5rem;


    --space-8:

        2rem;


    --space-10:

        2.5rem;


    --space-12:

        3rem;


    --space-16:

        4rem;


    --space-20:

        5rem;



    /* ----------------------------------------------------------------------
       BORDER SYSTEM
       ------------------------------------------------------------------- */


    --border-subtle:

        rgba(255,255,255,0.08);


    --border-medium:

        rgba(255,255,255,0.15);


    --border-accent:

        rgba(15,163,177,0.5);



    /* ----------------------------------------------------------------------
       RADIUS SYSTEM
       ------------------------------------------------------------------- */


    --radius-sm:

        0.375rem;


    --radius-md:

        0.75rem;


    --radius-lg:

        1.25rem;


    --radius-xl:

        1.75rem;


    --radius-pill:

        999px;



    /* ----------------------------------------------------------------------
       SHADOW SYSTEM
       ------------------------------------------------------------------- */


    --shadow-soft:

        0 8px 24px rgba(0,0,0,0.18);


    --shadow-medium:

        0 16px 40px rgba(0,0,0,0.25);


    --shadow-premium:

        0 24px 60px rgba(0,0,0,0.35);



    /* ----------------------------------------------------------------------
       TRANSITIONS
       ------------------------------------------------------------------- */


    --transition-fast:

        0.15s ease;


    --transition-default:

        0.25s ease;


    --transition-slow:

        0.4s ease;



}

/* ==========================================================================
   GLOBAL THEME APPLICATION
   ========================================================================== */


body {

    background:

        var(--ctm-deep-charcoal);

    color:

        var(--ctm-text-primary);

    font-family:

        var(--font-primary);

}



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


h1,
h2,
h3,
h4,
h5,
h6 {

    font-family:

        var(--font-heading);

    color:

        var(--ctm-text-primary);

    font-weight:

        var(--weight-semibold);

    letter-spacing:

        -0.02em;

}



h1 {

    font-size:

        var(--text-5xl);

    line-height:

        1.1;

}



h2 {

    font-size:

        var(--text-4xl);

    line-height:

        1.2;

}



h3 {

    font-size:

        var(--text-3xl);

    line-height:

        1.25;

}



h4 {

    font-size:

        var(--text-2xl);

}



p {

    color:

        var(--ctm-text-secondary);

    font-size:

        var(--text-base);

}



/* ==========================================================================
   LINK THEME
   ========================================================================== */


a {

    color:

        var(--ctm-teal);

    transition:

        color var(--transition-default);

}



a:hover {

    color:

        var(--ctm-teal-light);

}



/* ==========================================================================
   SURFACE SYSTEM
   ========================================================================== */


.surface {

    background:

        var(--ctm-surface);

    border:

        1px solid var(--border-subtle);

}



.surface-elevated {

    background:

        var(--ctm-surface-elevated);

    border:

        1px solid var(--border-medium);

    box-shadow:

        var(--shadow-soft);

}



/* ==========================================================================
   CARD THEME
   ========================================================================== */


.card {

    background:

        var(--ctm-surface);

    border:

        1px solid var(--border-subtle);

    border-radius:

        var(--radius-lg);

    box-shadow:

        var(--shadow-soft);

}



.card:hover {

    border-color:

        var(--border-accent);

}



/* ==========================================================================
   BUTTON THEME
   ========================================================================== */


.btn-primary {

    background:

        var(--ctm-teal);

    color:

        var(--ctm-white);

}



.btn-primary:hover {

    background:

        var(--ctm-teal-light);

}



.btn-secondary {

    background:

        transparent;

    color:

        var(--ctm-text-primary);

    border:

        1px solid var(--border-medium);

}



.btn-secondary:hover {

    border-color:

        var(--ctm-teal);

    color:

        var(--ctm-teal-light);

}



.btn-accent {

    background:

        var(--ctm-muted-gold);

    color:

        var(--ctm-deep-charcoal);

}



.btn-accent:hover {

    background:

        var(--ctm-muted-gold-light);

}



/* ==========================================================================
   FORM THEME
   ========================================================================== */


input,
textarea,
select {

    background:

        var(--ctm-surface);

    color:

        var(--ctm-text-primary);

    border:

        1px solid var(--border-medium);

    border-radius:

        var(--radius-md);

    padding:

        0.85rem 1rem;

    transition:

        border-color var(--transition-default),
        box-shadow var(--transition-default);

}



input::placeholder,
textarea::placeholder {

    color:

        var(--ctm-text-muted);

}



input:focus,
textarea:focus,
select:focus {

    border-color:

        var(--ctm-teal);

    box-shadow:

        0 0 0 3px rgba(15,163,177,0.15);

}



/* ==========================================================================
   LABEL THEME
   ========================================================================== */


label {

    color:

        var(--ctm-text-primary);

    font-size:

        var(--text-sm);

}



/* ==========================================================================
   PROGRESS THEME
   ========================================================================== */


.progress-track {

    background:

        rgba(255,255,255,0.08);

}



.progress-fill {

    background:

        linear-gradient(
            90deg,
            var(--ctm-teal),
            var(--ctm-teal-light)
        );

}



/* ==========================================================================
   LOADING THEME
   ========================================================================== */


.global-loader {

    background:

        rgba(24,26,31,0.96);

}



.loader-spinner {

    border:

        4px solid rgba(255,255,255,0.15);

    border-top-color:

        var(--ctm-teal);

}



/* ==========================================================================
   ERROR THEME
   ========================================================================== */


.error-container {

    background:

        var(--ctm-error);

    color:

        var(--ctm-white);

}



/* ==========================================================================
   DIVIDER THEME
   ========================================================================== */


.divider {

    background:

        var(--border-subtle);

}



/* ==========================================================================
   FOCUS THEME
   ========================================================================== */


:focus-visible {

    outline-color:

        var(--ctm-teal);

}



/* ==========================================================================
   PREMIUM EMPHASIS CLASSES
   ========================================================================== */


.text-accent {

    color:

        var(--ctm-teal);

}



.text-gold {

    color:

        var(--ctm-muted-gold);

}



.text-muted {

    color:

        var(--ctm-text-muted);

}



.text-primary {

    color:

        var(--ctm-text-primary);

}



/* ==========================================================================
   END OF THEME FOUNDATION

   Responsive adaptation:
   responsive.css

   Page styling:
   Individual page stylesheets

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