/*
|--------------------------------------------------------------------------
| Parham Prism Design System
|--------------------------------------------------------------------------
|
| Core Tokens + Reset
| Laravel 13 Frontend
|
*/

/*
|--------------------------------------------------------------------------
| Parham Fonts
|--------------------------------------------------------------------------
*/


@font-face {

    font-family:"Rokh";

    src:url("/assets/fonts/RokhFaNum-Medium.woff")
        format("woff");

    font-weight:500;

    font-style:normal;

    font-display:swap;

}



@font-face {

    font-family:"Kalameh";

    src:url("/assets/fonts/KalamehWeb-Regular.woff2")
        format("woff2");

    font-weight:400;

    font-style:normal;

    font-display:swap;

}


/*
|--------------------------------------------------------------------------
| Root Variables
|--------------------------------------------------------------------------
*/


:root {


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


    --prism-primary:#0F4C3A;

    --prism-primary-dark:#082D24;

    --prism-accent:#D4AF37;

    --prism-accent-light:#E8C76A;




    /*
    |--------------------------------------------------------------------------
    | Background
    |--------------------------------------------------------------------------
    */


    --prism-bg:#F8F6F1;

    --prism-surface:#FFFFFF;

    --prism-surface-soft:#F4F2EC;




    /*
    |--------------------------------------------------------------------------
    | Text
    |--------------------------------------------------------------------------
    */


    --prism-text:#121212;

    --prism-text-soft:#6B7280;

    --prism-text-muted:#9CA3AF;




    /*
    |--------------------------------------------------------------------------
    | Border
    |--------------------------------------------------------------------------
    */


    --prism-border:

        rgba(15,76,58,.12);





    /*
    |--------------------------------------------------------------------------
    | Radius
    |--------------------------------------------------------------------------
    */


    --radius-xs:6px;

    --radius-sm:10px;

    --radius-md:16px;

    --radius-lg:24px;

    --radius-xl:32px;




    /*
    |--------------------------------------------------------------------------
    | Shadow
    |--------------------------------------------------------------------------
    */


    --shadow-sm:

        0 2px 8px rgba(0,0,0,.04);



    --shadow-md:

        0 10px 30px rgba(0,0,0,.08);



    --shadow-lg:

        0 20px 50px rgba(0,0,0,.12);





    /*
    |--------------------------------------------------------------------------
    | 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;





    /*
    |--------------------------------------------------------------------------
    | Container
    |--------------------------------------------------------------------------
    */


    --container-width:1280px;





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


    --transition-fast:.2s ease;

    --transition-normal:.35s ease;


}




/*
|--------------------------------------------------------------------------
| Dark Mode
|--------------------------------------------------------------------------
*/


[data-theme="dark"] {


    --prism-bg:#0B0F0E;


    --prism-surface:#111817;


    --prism-surface-soft:#16201D;


    --prism-text:#F5F5F5;


    --prism-text-soft:#C7CEC9;


    --prism-text-muted:#89938D;


    --prism-border:

        rgba(255,255,255,.08);



    --shadow-sm:

        0 2px 8px rgba(0,0,0,.25);



    --shadow-md:

        0 10px 30px rgba(0,0,0,.35);


}





/*
|--------------------------------------------------------------------------
| Reset
|--------------------------------------------------------------------------
*/


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

    box-sizing:border-box;

}





html {

    scroll-behavior:smooth;

}





body {

    margin:0;

    background:

        var(--prism-bg);


    color:

        var(--prism-text);


    font-family:

        "Kalameh",

        sans-serif;


    transition:

        background var(--transition-normal),

        color var(--transition-normal);

}





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


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


    margin:0;


    font-family:

        "Rokh",

        sans-serif;


}





p {

    font-family:

        "Kalameh",

        sans-serif;

}





/*
|--------------------------------------------------------------------------
| Media
|--------------------------------------------------------------------------
*/


img {

    max-width:100%;

    display:block;

}





/*
|--------------------------------------------------------------------------
| Links
|--------------------------------------------------------------------------
*/


a {

    color:inherit;

    text-decoration:none;

}





/*
|--------------------------------------------------------------------------
| Form Elements
|--------------------------------------------------------------------------
*/


button,
input,
textarea,
select {


    font-family:

        inherit;


}
/* ============================================================
   PARHAM PAGE BUILDER
   Layout Foundation
   ============================================================ */

.page-builder {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.page-builder-row {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(var(--pb-columns, 1), minmax(0, 1fr));
    gap: 20px;
    box-sizing: border-box;
}

.page-builder-column {
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
}

.page-builder-section {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.page-builder-column:empty {
    min-height: 20px;
}

@media (max-width: 900px) {
    .page-builder-row {
        grid-template-columns: 1fr !important;
    }
}