/*
Theme Name: Mr Abroo
Theme URI: 
Author: Your Name
Description: Custom RTL WordPress theme for Mr Abroo Beauty Clinic & Academy.
Version: 1.0.0
Text Domain: mr-abroo
*/

/* =========================================================
   CUSTOM FONTS
   ========================================================= */

@font-face {
    font-family: "Vazirmatn";
    src: url("assets/fonts/Vazirmatn-Variable.woff2") format("woff2");
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
}

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

:root {

    /* -----------------------------------------------------
       COLORS
       ----------------------------------------------------- */

    /* --color-primary: #6E4E56;
    --color-secondary: #C8A97E;
    --color-accent: #8EAFA5;

    --color-background: #FAF8F6;
    --color-surface: #FFFFFF;
    --color-border: #E8E2DC;

    --color-text-primary: #2F2F2F;
    --color-text-secondary: #6B7280; */
/* ------------------------------------------------------- */
    --color-primary: #0B555E;
    --color-secondary: #39747A;
    --color-accent: #BB842A;

    --color-background: #F7F1E6;
    --color-surface: #FFFDF9;
    --color-border: #DED6C8;

    --color-text-primary: #1D292A;
    --color-text-secondary: #657476;


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

    --font-family-base: "Vazirmatn", sans-serif;

    --font-size-xs: 0.75rem;      /* 12px */
    --font-size-sm: 0.875rem;     /* 14px */
    --font-size-base: 1rem;       /* 16px */
    --font-size-lg: 1.125rem;     /* 18px */
    --font-size-xl: 1.25rem;      /* 20px */
    --font-size-2xl: 1.5rem;      /* 24px */
    --font-size-3xl: 2rem;        /* 32px */
    --font-size-4xl: 2.75rem;     /* 44px */
    --font-size-5xl: 3.5rem;      /* 56px */


    /* -----------------------------------------------------
       FONT WEIGHTS
       ----------------------------------------------------- */

    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;


    /* -----------------------------------------------------
       LINE HEIGHTS
       ----------------------------------------------------- */

    --line-height-tight: 1.2;
    --line-height-heading: 1.35;
    --line-height-body: 1.9;
    --line-height-relaxed: 2;


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

    --space-1: 0.5rem;     /* 8px */
    --space-2: 1rem;       /* 16px */
    --space-3: 1.5rem;     /* 24px */
    --space-4: 2rem;       /* 32px */
    --space-5: 3rem;       /* 48px */
    --space-6: 4rem;       /* 64px */
    --space-7: 5rem;       /* 80px */
    --space-8: 6rem;       /* 96px */
    --space-9: 7.5rem;     /* 120px */


    /* -----------------------------------------------------
       LAYOUT
       ----------------------------------------------------- */

    --container-width: 1200px;
    --container-wide: 1400px;

    --content-width: 800px;


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

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-xl: 28px;
    --radius-full: 9999px;


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

    --shadow-sm:
        0 2px 8px rgba(47, 47, 47, 0.04);

    --shadow-md:
        0 8px 24px rgba(47, 47, 47, 0.06);

    --shadow-lg:
        0 16px 40px rgba(47, 47, 47, 0.08);


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

    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
    --transition-slow: 400ms ease;
}


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

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

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--color-background);
    color: var(--color-text-primary);
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-body);
    direction: rtl;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

button,
input,
textarea,
select {
    font: inherit;
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    cursor: pointer;
}

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

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    color: var(--color-text-primary);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-heading);
}

h1 {
    font-size: var(--font-size-5xl);
}

h2 {
    font-size: var(--font-size-4xl);
}

h3 {
    font-size: var(--font-size-2xl);
}

h4 {
    font-size: var(--font-size-xl);
}

p {
    margin: 0;
    color: var(--color-text-secondary);
}

/* =========================================================
   LAYOUT
   ========================================================= */

.container {
    width: min(
        calc(100% - 3rem),
        var(--container-width)
    );

    margin-inline: auto;
}

.container--wide {
    width: min(
        calc(100% - 3rem),
        var(--container-wide)
    );

    margin-inline: auto;
}

@media (max-width: 768px) {

    :root {
        --font-size-4xl: 2rem;
        --font-size-5xl: 2.5rem;
    }

    .container,
    .container--wide {
        width: min(
            calc(100% - 2rem),
            var(--container-width)
        );
    }
}