/*==========================================================
 PromptForge
 Version : 0.1.0 - Foundation
 File    : base.css
 Purpose : Design Tokens, Reset, Typography & Global Styles
 Author  : Newbies Money
==========================================================*/

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

:root{

    /* Brand Colors */

    --pf-bg:#0B0B0D;
    --pf-surface:#15171B;
    --pf-surface-2:#1D2128;

    --pf-primary:#00FF88;
    --pf-primary-hover:#00E67A;

    --pf-text:#F5F7FA;
    --pf-muted:#9CA3AF;

    --pf-border:#2B313A;

    --pf-success:#22C55E;
    --pf-warning:#F59E0B;
    --pf-danger:#EF4444;

    /* Fonts */

    --font-heading:"Space Grotesk",sans-serif;
    --font-body:"Inter",sans-serif;

    /* Width */

    --container:1200px;

    /* Radius */

    --radius-sm:10px;
    --radius-md:16px;
    --radius-lg:22px;
    --radius-pill:999px;

    /* Spacing */

    --space-1:4px;
    --space-2:8px;
    --space-3:12px;
    --space-4:16px;
    --space-5:24px;
    --space-6:32px;
    --space-7:48px;
    --space-8:64px;
    --space-9:96px;

    /* Shadows */

    --shadow-sm:0 5px 15px rgba(0,0,0,.20);

    --shadow-md:0 12px 30px rgba(0,0,0,.35);

    --shadow-lg:0 20px 60px rgba(0,0,0,.50);

    /* Transition */

    --transition:.25s ease;

}


/*==========================================================
 RESET
==========================================================*/

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

    margin:0;
    padding:0;
    box-sizing:border-box;

}


html{

    scroll-behavior:smooth;

}


body{

    background:var(--pf-bg);

    color:var(--pf-text);

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

    line-height:1.7;

    -webkit-font-smoothing:antialiased;

    text-rendering:optimizeLegibility;

}


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

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

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

    font-weight:700;

    line-height:1.15;

    letter-spacing:-.03em;

}

h1{

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

}

h2{

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

}

h3{

    font-size:1.75rem;

}

p{

    color:var(--pf-muted);

    font-size:1.05rem;

}


/*==========================================================
 LINKS
==========================================================*/

a{

    color:inherit;

    text-decoration:none;

}


/*==========================================================
 LISTS
==========================================================*/

ul{

    list-style:none;

}


/*==========================================================
 IMAGES
==========================================================*/

img{

    display:block;

    max-width:100%;

}


/*==========================================================
 BUTTONS
==========================================================*/

button{

    font:inherit;

    cursor:pointer;

    border:none;

    background:none;

}


/*==========================================================
 CONTAINER
==========================================================*/

.container{

    width:min(100% - 40px,var(--container));

    margin-inline:auto;

}


/*==========================================================
 SECTION SPACING
==========================================================*/

section{

    padding:var(--space-9) 0;

}


/*==========================================================
 TEXT SELECTION
==========================================================*/

::selection{

    background:var(--pf-primary);

    color:#000;

}


/*==========================================================
 SCROLLBAR
==========================================================*/

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:var(--pf-bg);

}

::-webkit-scrollbar-thumb{

    background:var(--pf-primary);

    border-radius:999px;

}

::-webkit-scrollbar-thumb:hover{

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

}