/* ================================================================
   MARLIN STEM VIRTUAL ACADEMY
   Design System — Variables & Base Styles
   variables.css
   
   This file is the foundation of the entire design system.
   All colors, fonts, spacing and animations live here.
   Change a value here and it updates everywhere.
================================================================ */


/* ----------------------------------------------------------------
    COLOR PALETTE
    Warm editorial school palette inspired by the reference design
---------------------------------------------------------------- */
:root {

    /* -- Primary Blue (brand color — headings, buttons, CTAs) -- */
    --primary-blue:   #0B3D91;   /* Main brand blue                        */
    --secondary-blue: #1E88E5;   /* Hover states, secondary CTAs           */

    /* -- Legacy Navy (kept for backward compatibility) -- */
    --navy-900:   #0B3D91;   /* Updated to primary blue                */
    --navy-800:   #0B3D91;   /* Updated to primary blue                */
    --navy-700:   #1E88E5;   /* Updated to secondary blue              */
    --navy-600:   #1E88E5;   /* Updated to secondary blue              */
    --navy-500:   #4CAF50;   /* Updated to accent green                */

    /* -- Accent Green (success, badges, highlights) -- */
    --accent-green: #4CAF50;   /* Primary accent — success, badges      */
    --green-50:     #E8F5E9;   /* Light green backgrounds               */
    --green-100:    #C8E6C9;   /* Medium light green                    */

    /* -- Legacy Cyan (maps to green for compatibility) -- */
    --cyan-500:   #4CAF50;   /* Mapped to green                        */
    --cyan-600:   #45A049;   /* Green hover state                      */
    --cyan-700:   #3D8B40;   /* Green active state                     */
    --cyan-100:   #E8F5E9;   /* Light green backgrounds                */
    --cyan-50:    #F1F8F6;   /* Very light green backgrounds           */

    /* -- Neutrals (text, borders, backgrounds) -- */
    --white:      #FFFFFF;
    --background-light: #F8FAFC;  /* New light background color        */
    --text-dark:  #1E293B;        /* Dark text color                   */
    --grey-50:    #F8FAFC;        /* Updated to light background       */
    --grey-100:   #F1F5F9;        /* Light card backgrounds            */
    --grey-200:   #E2E8F0;        /* Borders, dividers                 */
    --grey-300:   #CBD5E1;        /* Disabled states                   */
    --grey-400:   #94A3B8;        /* Placeholder text, captions        */
    --grey-500:   #64748B;        /* Secondary body text               */
    --grey-700:   #1E293B;        /* Primary body text                 */
    --grey-900:   #0F172A;        /* Headings on light backgrounds     */

    /* -- Semantic colors -- */
    --success:    #4CAF50;        /* Updated to green                  */
    --success-bg: #E8F5E9;        /* Light green background            */
    --error:      #EF5350;
    --error-bg:   #FFEBEE;
    --warning:    #FFA726;
    --gold:       #FFC107;   /* Premium badges, highlights             */


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

    /* Display font — headings, hero, section titles */
    --font-display: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;

    /* Body font — all body text, UI elements */
    --font-body:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

    /* Monospace — code snippets if needed */
    --font-mono:    'Fira Code', 'Courier New', monospace;

    /* Font sizes — fluid scale */
    --text-xs:      11px;
    --text-sm:      13px;
    --text-base:    15px;
    --text-lg:      17px;
    --text-xl:      20px;
    --text-2xl:     24px;
    --text-3xl:     32px;

    /* Line heights */
    --leading-tight:  1.1;
    --leading-snug:   1.3;
    --leading-normal: 1.6;
    --leading-relaxed:1.75;

    /* Font weights */
    --weight-light:   300;
    --weight-normal:  400;
    --weight-medium:  500;
    --weight-semi:    600;
    --weight-bold:    700;
    --weight-black:   800;


    /* ----------------------------------------------------------------
       SPACING — consistent padding and margins throughout
    ---------------------------------------------------------------- */

    --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;
    --space-20:   80px;
    --space-24:   96px;

    /* Section vertical padding */
    --section-y:        64px;
    --section-x:        5%;

    /* Max content width */
    --max-width:        1240px;


    /* ----------------------------------------------------------------
       BORDER RADIUS
    ---------------------------------------------------------------- */

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


    /* ----------------------------------------------------------------
       SHADOWS
    ---------------------------------------------------------------- */

    --shadow-sm:  0 1px 3px rgba(20, 14, 8, 0.08);
    --shadow:     0 4px 16px rgba(20, 14, 8, 0.08);
    --shadow-md:  0 8px 32px rgba(20, 14, 8, 0.10);
    --shadow-lg:  0 16px 48px rgba(20, 14, 8, 0.14);
    --shadow-xl:  0 24px 64px rgba(20, 14, 8, 0.18);

    /* Colored shadows for interactive elements */
    --shadow-cyan: 0 8px 32px rgba(95, 174, 227, 0.25);
    --shadow-navy: 0 8px 32px rgba(15, 31, 49, 0.35);


    /* ----------------------------------------------------------------
       TRANSITIONS & ANIMATIONS
    ---------------------------------------------------------------- */

    --ease:         cubic-bezier(0.4, 0, 0.2, 1);
    --ease-out:     cubic-bezier(0, 0, 0.2, 1);
    --ease-in:      cubic-bezier(0.4, 0, 1, 1);
    --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);

    --duration-fast:   150ms;
    --duration-base:   250ms;
    --duration-slow:   400ms;
    --duration-slower: 600ms;

    /* Shorthand transitions */
    --transition:       all var(--duration-base) var(--ease);
    --transition-fast:  all var(--duration-fast)  var(--ease);
    --transition-slow:  all var(--duration-slow)  var(--ease);


    /* ----------------------------------------------------------------
       Z-INDEX SCALE — prevents stacking context chaos
    ---------------------------------------------------------------- */

    --z-below:    -1;
    --z-base:      0;
    --z-raised:   10;
    --z-dropdown: 100;
    --z-sticky:   200;
    --z-fixed:    300;
    --z-modal:    400;
    --z-toast:    500;
}


/* ================================================================
   RESET & BASE STYLES
   Sensible defaults — builds on top of browser resets
================================================================ */

*,
*::before,
*::after {
    box-sizing: border-box;
    margin:     0;
    padding:    0;
}

html {
    font-size:       16px;
    scroll-behavior: smooth;

    /* Prevent layout shift from scrollbar appearing */
    overflow-y: scroll;
}

body {
    font-family:         var(--font-body);
    font-size:           var(--text-base);
    font-weight:         var(--weight-normal);
    line-height:         var(--leading-normal);
    color:               var(--text-dark);
    background:
        linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 50%, #F8FAFC 100%);
    overflow-x:          hidden;

    /* Improve text rendering */
    -webkit-font-smoothing:  antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering:          optimizeLegibility;
}

/* Remove default list styles */
ul,
ol {
    list-style: none;
}

/* Make images behave */
img,
picture,
video,
canvas,
svg {
    display:   block;
    max-width: 100%;
}

/* Inherit fonts for form elements */
input,
button,
textarea,
select {
    font-family: inherit;
    font-size:   inherit;
}

/* Remove default button styles */
button {
    cursor:     pointer;
    border:     none;
    background: none;
}

/* Remove default anchor styles */
a {
    text-decoration: none;
    color:           inherit;
}

::selection {
    background: rgba(95, 174, 227, 0.22);
    color:      var(--grey-900);
}

/* Prevent text overflow */
p,
h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
}


/* ================================================================
   CUSTOM SCROLLBAR — matches brand colors
================================================================ */

::-webkit-scrollbar {
    width: 5px;
}

::-webkit-scrollbar-track {
    background: var(--grey-100);
}

::-webkit-scrollbar-thumb {
    background:    var(--primary-blue);
    border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--secondary-blue);
}


/* ================================================================
   LAYOUT UTILITIES
   Reusable helpers used throughout all section files
================================================================ */

/* Container — max width with consistent side padding */
.container {
    width:     100%;
    max-width: var(--max-width);
    margin:    0 auto;
    padding:   0 var(--section-x);
}

/* Section base — consistent vertical breathing room */
.section {
    padding: var(--section-y) var(--section-x);
}

/* Section color variants */
.section--white  { background: var(--white);    color: var(--text-dark); }
.section--light  { background: var(--background-light);  color: var(--text-dark); }
.section--navy   { background: var(--primary-blue); color: var(--white);    }
.section--dark   { background: var(--secondary-blue); color: var(--white);    }

/* Flex helpers */
.flex           { display: flex; }
.flex-center    { display: flex; align-items: center; justify-content: center; }
.flex-between   { display: flex; align-items: center; justify-content: space-between; }
.flex-col       { display: flex; flex-direction: column; }

/* Grid helpers */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); }


/* ================================================================
   TYPOGRAPHY UTILITIES
   Consistent type styles across all sections
================================================================ */

/* Section eyebrow — small label above headings */
.eyebrow {
    display:         flex;
    align-items:     center;
    gap:             var(--space-3);
    font-size:       var(--text-xs);
    font-weight:     var(--weight-bold);
    text-transform:  uppercase;
    letter-spacing:  0.12em;
    color:           var(--accent-green);
    margin-bottom:   var(--space-4);
}

.eyebrow--dark {
    color: var(--accent-green);
}

.eyebrow__line {
    width:         28px;
    height:        2px;
    border-radius: var(--radius-full);
    background:    currentColor;
    flex-shrink:   0;
}

/* Display headings */
.heading-display {
    font-family:    var(--font-display);
    font-size:      clamp(32px, 5vw, 54px);
    font-weight:    var(--weight-bold);
    line-height:    var(--leading-tight);
    letter-spacing: -0.02em;
    margin-bottom:  var(--space-5);
}

.heading-display--light { color: var(--primary-blue); }
.heading-display--dark  { color: var(--white);    }

.heading-display em {
    font-style: italic;
    color:      var(--secondary-blue);
}

.heading-display--dark em {
    color: var(--accent-green);
}

/* Section subheading */
.heading-sub {
    font-family:    var(--font-display);
    font-size:      clamp(22px, 3vw, 32px);
    font-weight:    var(--weight-bold);
    line-height:    var(--leading-snug);
    letter-spacing: -0.01em;
    color:          var(--grey-900);
}

/* Body / description text */
.body-text {
    font-size:   var(--text-lg);
    color:       var(--grey-500);
    line-height: var(--leading-relaxed);
    max-width:   520px;
}

.body-text--dark {
    color: rgba(255, 255, 255, 0.6);
}

/* Caption / small text */
.caption {
    font-size:      var(--text-sm);
    color:          var(--grey-400);
    letter-spacing: 0.02em;
}


/* ================================================================
   BUTTON SYSTEM
   All button variants in one place
================================================================ */

.btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             var(--space-2);
    padding:         14px 32px;
    border-radius:   var(--radius);
    font-family:     var(--font-body);
    font-size:       var(--text-base);
    font-weight:     var(--weight-semi);
    line-height:     1;
    cursor:          pointer;
    border:          2px solid transparent;
    transition:      var(--transition);
    white-space:     nowrap;
    text-decoration: none;
}

/* Primary — blue fill */
.btn--primary {
    background:   var(--primary-blue);
    color:        var(--white);
    border-color: var(--primary-blue);
    box-shadow:   0 4px 16px rgba(11, 61, 145, 0.2);
}
.btn--primary:hover {
    background:   var(--secondary-blue);
    color:        var(--white);
    border-color: var(--secondary-blue);
    transform:    translateY(-2px);
}

/* Secondary — outline */
.btn--secondary {
    background:   transparent;
    color:        var(--primary-blue);
    border-color: var(--primary-blue);
}
.btn--secondary:hover {
    border-color: var(--secondary-blue);
    background:   var(--background-light);
    color:        var(--secondary-blue);
}

/* Ghost — for dark backgrounds */
.btn--ghost {
    background:   transparent;
    color:        var(--white);
    border-color: rgba(255, 255, 255, 0.35);
}
.btn--ghost:hover {
    background:   var(--accent-green);
    color:        var(--white);
    border-color: var(--accent-green);
}

/* Navy fill */
.btn--navy {
    background:   var(--primary-blue);
    color:        var(--white);
    border-color: var(--primary-blue);
}
.btn--navy:hover {
    background:   var(--secondary-blue);
    color:        var(--white);
    border-color: var(--secondary-blue);
}

/* Button sizes */
.btn--sm { padding: 9px 20px; font-size: var(--text-sm); }
.btn--lg { padding: 18px 44px; font-size: var(--text-lg); }


/* ================================================================
   SCROLL REVEAL ANIMATION
   Add class="reveal" to any element to animate on scroll.
   JavaScript in main.js adds .reveal--visible when in viewport.
================================================================ */

.reveal {
    opacity:    0;
    transform:  translateY(32px);
    transition:
        opacity   0.65s var(--ease-out),
        transform 0.65s var(--ease-out);
}

.reveal--visible {
    opacity:   1;
    transform: translateY(0);
}

/* Stagger delays for groups of reveals */
.reveal--delay-1 { transition-delay: 100ms; }
.reveal--delay-2 { transition-delay: 200ms; }
.reveal--delay-3 { transition-delay: 300ms; }
.reveal--delay-4 { transition-delay: 400ms; }


/* ================================================================
   RESPONSIVE BREAKPOINTS
   Adjust global variables for smaller screens
================================================================ */

/* Tablet */
@media (max-width: 1024px) {
    :root {
        --section-y: 52px;
        --section-x: 5%;
    }
}

/* Mobile */
@media (max-width: 768px) {
    :root {
        --section-y: 44px;
        --section-x: 5%;
    }
}

/* Small mobile */
@media (max-width: 480px) {
    :root {
        --section-y: 44px;
        --section-x: 5%;
    }
}