/**
 * design-system.css
 * FROZEN design tokens for the Aravira salon marketplace. Feminine, warm,
 * elegant palette: blush/rose pinks, deep plum/burgundy accent, warm gold
 * highlight, cream backgrounds. Persian (Vazirmatn) webfont, RTL base.
 *
 * Later agents: APPEND new component rules to components.css (see the
 * boundary marker there). Do not edit the custom-property values below —
 * they are the shared contract every page's visuals depend on.
 */

/* ===== Vazirmatn Persian webfont (CDN) ===== */
@import url('https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/Vazirmatn-font-face.css');

:root {
    /* ---- Color palette ---- */
    --color-blush-50:  #fdf3f5;
    --color-blush-100: #fbe6ea;
    --color-blush-200: #f6cdd6;
    --color-blush-300: #eeaebc;
    --color-rose-400:  #e28aa0;
    --color-rose-500:  #d46680;
    --color-rose-600:  #b84a67;

    --color-plum-700:  #5c2340;
    --color-plum-800:  #451a30;
    --color-plum-900:  #331327;

    --color-gold-300:  #f0d9a6;
    --color-gold-400:  #e0b96b;
    --color-gold-500:  #c99a44;

    --color-cream-50:  #fffaf5;
    --color-cream-100: #fdf6ee;

    --color-text-main:  var(--color-plum-900);
    --color-text-muted: #7a5c6c;
    --color-text-on-dark: #fdf6ee;

    --color-success: #3f8f5f;
    --color-error:   #c0374a;
    --color-info:    #3a6f9c;
    --color-warning: var(--color-gold-500);

    --color-border: #ecd7dd;
    --color-bg-page: var(--color-cream-50);
    --color-bg-card: #ffffff;

    /* ---- Brand gradient (used for story rings, discount badges, etc.) ---- */
    --gradient-brand: linear-gradient(135deg, var(--color-rose-500), var(--color-gold-400) 60%, var(--color-plum-700));

    /* ---- Typography ---- */
    --font-family-base: 'Vazirmatn', 'Tahoma', system-ui, -apple-system, 'Segoe UI', sans-serif;

    --font-size-xs:   0.75rem;
    --font-size-sm:   0.875rem;
    --font-size-base: 1rem;
    --font-size-md:   1.125rem;
    --font-size-lg:   1.375rem;
    --font-size-xl:   1.75rem;
    --font-size-xxl:  2.25rem;

    /* ---- Spacing scale ---- */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4rem;

    /* ---- Border radius scale (generous rounding) ---- */
    --radius-sm: 0.5rem;
    --radius-md: 1rem;
    --radius-lg: 1.5rem;
    --radius-xl: 2rem;
    --radius-full: 999px;

    /* ---- Shadows ---- */
    --shadow-sm: 0 1px 3px rgba(92, 35, 64, 0.08);
    --shadow-md: 0 4px 16px rgba(92, 35, 64, 0.10);
    --shadow-lg: 0 10px 30px rgba(92, 35, 64, 0.14);

    /* ---- Layout ---- */
    --bottom-nav-height: 64px;
    --header-height: 60px;
    --container-max-width: 480px; /* mobile-first: content column width on wider screens */
}

/* ---- Breakpoints (documented as variables/comments; media queries can't
   use custom properties directly, so use these values literally) ----
   --bp-sm: 480px   (large phones)
   --bp-md: 768px   (tablets)
   --bp-lg: 1024px  (small desktops)
*/

/* ===== Base resets ===== */
*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
}

html[dir="rtl"] {
    direction: rtl;
}

body {
    direction: rtl;
    font-family: var(--font-family-base);
    background: var(--color-bg-page);
    color: var(--color-text-main);
    font-size: var(--font-size-base);
    line-height: 1.8;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family-base);
    color: var(--color-plum-800);
    margin: 0 0 var(--space-3);
    font-weight: 700;
    line-height: 1.5;
}

p {
    margin: 0 0 var(--space-3);
}

a {
    color: var(--color-rose-600);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

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

ul, ol {
    padding-inline-start: var(--space-5);
}

button {
    font-family: inherit;
}

::selection {
    background: var(--color-blush-200);
    color: var(--color-plum-900);
}

/* ===== Layout container ===== */
.container {
    width: 100%;
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 var(--space-4);
}

@media (min-width: 768px) {
    .container {
        max-width: 720px;
    }
}

@media (min-width: 1024px) {
    .container {
        max-width: 960px;
    }
}