/* ==========================================================================
   Baharak — Design Tokens
   Single source of truth for colors, spacing, typography, radius, shadows.
   ========================================================================== */

:root {
    /* ----- Color: Brand Primary (Steel blue: trust + calm) ----- */
    --color-primary-900: #243C5E;
    --color-primary-700: #3A5985;
    --color-primary-600: #4F709C;
    --color-primary-500: #7290B8;
    --color-primary-100: #E3EAF3;
    --color-primary-50:  #F2F5FA;

    /* ----- Color: Secondary (Terracotta: warmth, child-facing moments) ----- */
    --color-secondary-600: #9E401F;
    --color-secondary-500: #B8541F;
    --color-secondary-100: #F5DFD3;
    --color-secondary-50:  #FBF0E9;

    /* ----- Color: Accent (Ochre: progress, rewards) ----- */
    --color-accent-600: #8A5A12;
    --color-accent-500: #C8922A;
    --color-accent-400: #DFA93D;
    --color-accent-100: #F6E6C4;

    /* ----- Color: Neutrals (warm grays) ----- */
    --color-bg-page:     #FBFAF7;
    --color-bg-section:  #F3F1EC;
    --color-surface:     #FFFFFF;
    --color-border:      #E7E3DA;
    --color-border-strong: #D6D1C6;

    /* ----- Color: Text ----- */
    --text-strong: #26231F;
    --text-body:   #45413A;
    --text-muted:  #79746A;
    --text-inverse:#FFFFFF;

    /* ----- Color: Semantic ----- */
    --color-success:       #1F8A5B;
    --color-success-bg:    #E3F4EB;
    --color-warning:       #B26B00;
    --color-warning-bg:    #FBF0DC;
    --color-error:         #C43D47;
    --color-error-bg:      #FAE7E8;
    --color-info:          #0C6E8C;
    --color-info-bg:       #E3F0F3;

    /* ----- Typography ----- */
    --font-family-base: "Vazirmatn", "Tahoma", sans-serif;

    --text-xs:   0.75rem;    /* 12px */
    --text-sm:   0.875rem;   /* 14px */
    --text-md:   1rem;       /* 16px */
    --text-lg:   1.125rem;   /* 18px */

    --text-h3: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
    --text-h2: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
    --text-h1: clamp(1.75rem, 1.3rem + 2vw, 2.75rem);

    --line-height-tight:  1.35;
    --line-height-normal: 1.85;

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

    /* ----- Radius scale ----- */
    --radius-sm:   8px;
    --radius-md:   12px;
    --radius-lg:   16px;
    --radius-xl:   20px;
    --radius-full: 999px;

    /* ----- Shadows (subtle by design) ----- */
    --shadow-xs: 0 1px 2px rgb(38 35 31 / 0.04);
    --shadow-sm: 0 1px 2px rgb(38 35 31 / 0.05);
    --shadow-md: 0 2px 8px rgb(38 35 31 / 0.07);
    --shadow-lg: 0 8px 24px rgb(38 35 31 / 0.10);

    /* ----- Z-index layers ----- */
    --z-header:  100;
    --z-overlay: 200;
    --z-modal:   300;
    --z-toast:   400;

    /* ----- Layout ----- */
    --container-width: 1200px;
    --header-height: 4.5rem;
}