/*
|--------------------------------------------------------------------------
| MentalFluency Framework
|--------------------------------------------------------------------------
|
| Version : 1.0
| Iteration : 1
|
| Foundation for the MentalFluency design system.
|
| This file defines:
|
| • CSS Variables
| • Base Styles
| • Layout System
| • Typography
|
| Higher-level components (buttons, cards, games, etc.)
| are added in later iterations.
|
*/



/* ==========================================================================
   01. CSS Variables
   ========================================================================== */

:root{

    /* ----------------------------------------------------------------------
       Brand
       ---------------------------------------------------------------------- */

    --mf-primary:#0F766E;
    --mf-primary-hover:#115E59;
    --mf-primary-light:#ECFDF5;


    /* ----------------------------------------------------------------------
       Neutral
       ---------------------------------------------------------------------- */

    --mf-background:#F8FAFC;
    --mf-surface:#FFFFFF;

    --mf-heading:#111827;
    --mf-text:#4B5563;
    --mf-muted:#9CA3AF;

    --mf-border:#E5E7EB;
    --mf-divider:#D1D5DB;


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

    --mf-success:#16A34A;
    --mf-warning:#D97706;
    --mf-error:#DC2626;


    /* ----------------------------------------------------------------------
       Achievement
       ---------------------------------------------------------------------- */

    --mf-gold:#C9A227;


    /* ----------------------------------------------------------------------
       Border Radius
       ---------------------------------------------------------------------- */

    --mf-radius-sm:8px;
    --mf-radius:16px;
    --mf-radius-lg:24px;
    --mf-radius-xl:32px;


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

    --mf-shadow-sm:
            0 2px 8px rgba(17,24,39,.05);

    --mf-shadow:
            0 10px 30px rgba(17,24,39,.08);

    --mf-shadow-lg:
            0 18px 48px rgba(17,24,39,.10);


    /* ----------------------------------------------------------------------
       Typography
       ---------------------------------------------------------------------- */

    --mf-font-heading:Manrope,sans-serif;
    --mf-font-body:Inter,sans-serif;


    /* ----------------------------------------------------------------------
       Spacing
       ---------------------------------------------------------------------- */

    --mf-space-xs:4px;
    --mf-space-sm:8px;
    --mf-space-md:16px;
    --mf-space-lg:24px;
    --mf-space-xl:32px;
    --mf-space-2xl:48px;
    --mf-space-3xl:72px;
    --mf-space-4xl:96px;


    /* ----------------------------------------------------------------------
       Animation
       ---------------------------------------------------------------------- */

    --mf-speed-fast:.15s;
    --mf-speed:.25s;
    --mf-speed-slow:.4s;

}



/* ==========================================================================
   02. Base
   ========================================================================== */

*,
*::before,
*::after{

    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}
/* ------------------------------------------
   Mental Fluency Card
------------------------------------------- */

.mfs-card {
    cursor: pointer;
    transition:
            transform 0.28s ease,
            border-color 0.28s ease;
}

.mfs-card:hover {
    transform: translateY(-4px);
    border-color: var(--mf-primary) !important;
}

/* Title */

.mfs-card .mfs-card-title {
    transition: color 0.28s ease;
}

.mfs-card:hover .mfs-card-title {
    color: var(--mf-primary);
}

/* Arrow */

.mfs-card .mfs-card-arrow {
    display: inline-block;
    transition:
            transform 0.28s ease,
            color 0.28s ease;
}

.mfs-card:hover .mfs-card-arrow {
    transform: translateX(4px);
    color: var(--mf-primary);
}
/*--------------------------*/

body{

    margin:0;

    background:var(--mf-background);

    color:var(--mf-text);

    font-family:var(--mf-font-body);

    line-height:1.7;

    -webkit-font-smoothing:antialiased;

    text-rendering:optimizeLegibility;

}

img{

    display:block;

    max-width:100%;

    height:auto;

}

svg{

    display:block;

}

a{

    color:inherit;

    text-decoration:none;

}

button{

    font:inherit;

}



/* ==========================================================================
   03. Layout
   ========================================================================== */

.mf-container{

    width:min(1200px,92%);

    margin-inline:auto;

}

.mf-content{

    width:min(1000px,92%);

    margin-inline:auto;

}

.mf-reading{

    width:min(750px,92%);

    margin-inline:auto;

}

.mf-section{

    padding:var(--mf-space-4xl) 0;

}

.mf-grid{

    display:grid;

    gap:var(--mf-space-lg);

}

.mf-grid-2{

    grid-template-columns:repeat(2,minmax(0,1fr));

}

.mf-grid-3{

    grid-template-columns:repeat(3,minmax(0,1fr));

}

.mf-grid-4{

    grid-template-columns:repeat(4,minmax(0,1fr));

}

.mf-flex{

    display:flex;

}

.mf-stack{

    display:flex;

    flex-direction:column;

}



/* ==========================================================================
   04. Typography
   ========================================================================== */

.mf-display{

    font-family:var(--mf-font-heading);

    font-size:clamp(3rem,7vw,5rem);

    font-weight:700;

    line-height:1.05;

    color:var(--mf-heading);

}

.mf-h1{

    font-family:var(--mf-font-heading);

    font-size:clamp(2.4rem,5vw,3.5rem);

    font-weight:700;

    line-height:1.15;

    color:var(--mf-heading);

}

.mf-h2{

    font-family:var(--mf-font-heading);

    font-size:clamp(2rem,4vw,2.6rem);

    font-weight:700;

    line-height:1.2;

    color:var(--mf-heading);

}

.mf-h3{

    font-family:var(--mf-font-heading);

    font-size:1.75rem;

    font-weight:700;

    line-height:1.3;

    color:var(--mf-heading);

}

.mf-h4{

    font-family:var(--mf-font-heading);

    font-size:1.35rem;

    font-weight:600;

    line-height:1.4;

    color:var(--mf-heading);

}

.mf-text{

    color:var(--mf-text);

    line-height:1.8;

}

.mf-lead{

    font-size:1.2rem;

    color:var(--mf-heading);

    line-height:1.8;

}

.mf-small{

    font-size:.92rem;

    color:var(--mf-muted);

}

.mf-muted{

    color:var(--mf-muted);

}



/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width:1024px){

    .mf-grid-4{

        grid-template-columns:repeat(2,minmax(0,1fr));

    }

}

@media (max-width:768px){

    .mf-section{

        padding:72px 0;

    }

    .mf-grid-2,
    .mf-grid-3,
    .mf-grid-4{

        grid-template-columns:1fr;

    }

}

@media (max-width:480px){

    .mf-section{

        padding:56px 0;

    }

}

/* ==========================================================================
   05. Buttons
   ========================================================================== */

.mf-btn{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    gap:10px;

    padding:12px 24px;

    border:none;

    border-radius:12px;

    font-family:var(--mf-font-body);

    font-size:16px;

    font-weight:600;

    line-height:1;

    cursor:pointer;

    transition:
            background-color var(--mf-speed),
            color var(--mf-speed),
            border-color var(--mf-speed),
            transform var(--mf-speed);

}

.mf-btn:hover{

    transform:translateY(-2px);

}

.mf-btn-primary{

    background:var(--mf-primary);

    color:#FFFFFF;

}

.mf-btn-primary:hover{

    background:var(--mf-primary-hover);

}

.mf-btn-secondary{

    background:var(--mf-surface);

    color:var(--mf-heading);

    border:1px solid var(--mf-border);

}

.mf-btn-secondary:hover{

    border-color:var(--mf-primary);

}

.mf-btn-ghost{

    background:transparent;

    color:var(--mf-heading);

}

.mf-btn-link{

    padding:0;

    background:none;

    color:var(--mf-primary);

}

/* ==========================================================================
   06. Cards
   ========================================================================== */

.mf-card{

    display:flex;

    flex-direction:column;

    gap:16px;

    padding:24px;

    background:var(--mf-surface);

    border:1px solid var(--mf-border);

    border-radius:var(--mf-radius-lg);

    transition:
            transform var(--mf-speed),
            border-color var(--mf-speed);

}

.mf-card:hover{

    transform:translateY(-4px);

    border-color:var(--mf-primary);

}

.mf-card-header{

    display:flex;

    align-items:center;

    gap:12px;

}

.mf-card-body{

    flex:1;

}

.mf-card-footer{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-top:auto;

}

.mf-card-title{

    margin:0;

    font-family:var(--mf-font-heading);

    font-size:22px;

    font-weight:600;

    color:var(--mf-heading);

    transition:color var(--mf-speed);

}

.mf-card-text{

    margin:0;

    color:var(--mf-text);

    line-height:1.7;

}

.mf-card-link{

    display:inline-flex;

    align-items:center;

    gap:8px;

    color:var(--mf-primary);

    font-weight:600;

}

.mf-card:hover .mf-card-title{

    color:var(--mf-primary);

}

/* ==========================================================================
   07. Navigation
   ========================================================================== */

.mf-navbar{

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.mf-nav{

    display:flex;

    gap:32px;

}

.mf-nav-link{

    position:relative;

    color:var(--mf-heading);

    font-weight:500;

    transition:color var(--mf-speed);

}

.mf-nav-link:hover{

    color:var(--mf-primary);

}

/* ==========================================================================
   08. Hero
   ========================================================================== */

.mf-hero{

    padding:120px 0;

}

.mf-hero-title{

    max-width:12ch;

}

.mf-hero-subtitle{

    max-width:36rem;

    margin-top:24px;

}

.mf-hero-actions{

    display:flex;

    gap:16px;

    margin-top:40px;

    flex-wrap:wrap;

}

/* ==========================================================================
   09. Badges
   ========================================================================== */

.mf-badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:6px 12px;

    border-radius:999px;

    background:var(--mf-primary-light);

    color:var(--mf-primary);

    font-size:14px;

    font-weight:600;

}

.mf-badge-success{

    background:#DCFCE7;

    color:var(--mf-success);

}

.mf-badge-warning{

    background:#FEF3C7;

    color:var(--mf-warning);

}

.mf-badge-error{

    background:#FEE2E2;

    color:var(--mf-error);

}

/* ==========================================================================
   10. Forms
   ========================================================================== */

.mf-input,
.mf-select{

    width:100%;

    padding:12px 16px;

    border:1px solid var(--mf-border);

    border-radius:12px;

    background:var(--mf-surface);

    color:var(--mf-heading);

    font:inherit;

    transition:border-color var(--mf-speed);

}

.mf-input:focus,
.mf-select:focus{

    outline:none;

    border-color:var(--mf-primary);

}

.mf-label{

    display:block;

    margin-bottom:8px;

    font-weight:600;

    color:var(--mf-heading);

}

/* ==========================================================================
   11. Games
   ========================================================================== */

.mf-game{

    width:100%;

    color:var(--mf-text);

    font-family:var(--mf-font-body);

}

.mf-board{

    position:relative;

    width:100%;

    margin-inline:auto;

}

.mf-toolbar{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:16px;

    flex-wrap:wrap;

    margin-bottom:24px;

}

.mf-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:24px;

    margin-bottom:32px;

}

.mf-footer{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:24px;

    margin-top:32px;

    flex-wrap:wrap;

}

/* ==========================================================================
   12. Statistics
   ========================================================================== */

.mf-stat{

    display:flex;

    flex-direction:column;

    gap:4px;

}

.mf-stat-value{

    font-size:1.5rem;

    font-weight:700;

    color:var(--mf-heading);

}

.mf-stat-label{

    font-size:.85rem;

    color:var(--mf-muted);

}

/* ==========================================================================
   13. Motion
   ========================================================================== */

.mf-card{

    transition:
            transform var(--mf-speed),
            border-color var(--mf-speed),
            color var(--mf-speed);

}

.mf-card:hover{

    transform:translateY(-4px);

    border-color:var(--mf-primary);

}

.mf-card:hover .mf-card-title{

    color:var(--mf-primary);

}

.mf-arrow{

    display:inline-flex;

    align-items:center;

    transition:
            transform var(--mf-speed),
            color var(--mf-speed);

}

.mf-card:hover .mf-arrow{

    transform:translateX(4px);

    color:var(--mf-primary);

}

.mf-btn{

    transition:
            background-color var(--mf-speed),
            border-color var(--mf-speed),
            color var(--mf-speed),
            transform var(--mf-speed);

}

.mf-btn:hover{

    transform:translateY(-2px);

}

.mf-link{

    transition:
            color var(--mf-speed);

}

.mf-link:hover{

    color:var(--mf-primary);

}

/* ==========================================================================
   14. Utilities
   ========================================================================== */

.mf-hidden{

    display:none !important;

}

.mf-center{

    display:flex;

    justify-content:center;

    align-items:center;

}

.mf-between{

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.mf-start{

    display:flex;

    align-items:flex-start;

}

.mf-end{

    display:flex;

    align-items:flex-end;

}

.mf-wrap{

    flex-wrap:wrap;

}

/* Gap */

.mf-gap-xs{

    gap:var(--mf-space-xs);

}

.mf-gap-sm{

    gap:var(--mf-space-sm);

}

.mf-gap-md{

    gap:var(--mf-space-md);

}

.mf-gap-lg{

    gap:var(--mf-space-lg);

}

.mf-gap-xl{

    gap:var(--mf-space-xl);

}

/* Radius */

.mf-rounded{

    border-radius:var(--mf-radius);

}

.mf-rounded-lg{

    border-radius:var(--mf-radius-lg);

}

.mf-rounded-xl{

    border-radius:var(--mf-radius-xl);

}

/* Border */

.mf-border{

    border:1px solid var(--mf-border);

}

/* Width */

.mf-w-full{

    width:100%;

}

/* Text */

.mf-text-center{

    text-align:center;

}

.mf-text-left{

    text-align:left;

}

.mf-text-right{

    text-align:right;

}

/* ==========================================================================
   15. Responsive
   ========================================================================== */

@media (max-width:1024px){

    .mf-hero{

        padding:96px 0;

    }

}

@media (max-width:768px){

    .mf-header,
    .mf-footer,
    .mf-toolbar{

        flex-direction:column;

        align-items:flex-start;

    }

    .mf-hero{

        padding:72px 0;

    }

}

@media (max-width:480px){

    .mf-section{

        padding:56px 0;

    }

    .mf-hero{

        padding:56px 0;

    }

}