/* ==========================================================================
   SMAB Volunteer — Brand Design Tokens
   File: assets/css/brand-tokens.css
   Load BEFORE frontend.css so shortcode components inherit these values.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Amiri:ital,wght@0,400;0,700;1,400&family=Cormorant+Garamond:wght@400;500;600;700&family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700&display=swap');

:root {
    /* ---- Brand palette (sourced from smab.church) ---- */
    --smab-burgundy:        #8B2332;   /* primary — logo red */
    --smab-burgundy-deep:   #6B1A27;   /* hover / pressed */
    --smab-burgundy-dark:   #4A1119;   /* headings on cream */
    --smab-brown:           #6B4423;   /* secondary — warm brown */
    --smab-brown-deep:      #4A2F17;
    --smab-gold-leaf:       #B8924E;   /* liturgical accent */

    /* ---- Neutrals (warm, parchment-like) ---- */
    --smab-cream:           #F5EFE6;   /* page background */
    --smab-cream-soft:      #FAF6EF;   /* card surface */
    --smab-parchment:       #EDE4D3;   /* muted surface */
    --smab-ink:             #2B1810;   /* body text */
    --smab-ink-soft:        #4A3529;   /* secondary text */
    --smab-ink-muted:       #7A6A5C;   /* tertiary / placeholder */
    --smab-line:            #D9CDB8;   /* borders, dividers */
    --smab-line-soft:       #E6DCC8;

    /* ---- State colors (tuned to the warm palette) ---- */
    --smab-success:         #4A6B3A;
    --smab-warning:         #B8893B;
    --smab-error:           #A63430;
    --smab-error-bg:        #F5E0DD;

    /* ---- Typography ---- */
    --smab-font-display-ar: 'Amiri', 'Cairo', serif;
    --smab-font-display-en: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
    --smab-font-body-ar:    'IBM Plex Sans Arabic', 'Cairo', system-ui, sans-serif;
    --smab-font-body-en:    'IBM Plex Sans Arabic', 'Open Sans', system-ui, sans-serif;

    --smab-fs-xs:    12px;
    --smab-fs-sm:    14px;
    --smab-fs-base:  16px;
    --smab-fs-md:    18px;
    --smab-fs-lg:    22px;
    --smab-fs-xl:    28px;
    --smab-fs-2xl:   36px;
    --smab-fs-3xl:   48px;
    --smab-fs-4xl:   64px;

    /* ---- Spacing (8px base) ---- */
    --smab-s-1:  4px;
    --smab-s-2:  8px;
    --smab-s-3:  12px;
    --smab-s-4:  16px;
    --smab-s-5:  24px;
    --smab-s-6:  32px;
    --smab-s-7:  48px;
    --smab-s-8:  64px;
    --smab-s-9:  96px;

    /* ---- Radii (restrained — traditional feel, not tech-y) ---- */
    --smab-radius-sm: 2px;
    --smab-radius:    4px;
    --smab-radius-lg: 8px;

    /* ---- Shadows (warm-tinted, not pure black) ---- */
    --smab-shadow-sm:  0 1px 2px rgba(75, 30, 25, 0.06);
    --smab-shadow:     0 4px 12px rgba(75, 30, 25, 0.08);
    --smab-shadow-lg:  0 12px 32px rgba(75, 30, 25, 0.12);
    --smab-shadow-xl:  0 24px 60px rgba(75, 30, 25, 0.18);

    /* ---- Motion ---- */
    --smab-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --smab-dur-fast: 180ms;
    --smab-dur:      280ms;
    --smab-dur-slow: 500ms;

    /* ---- Layout ---- */
    --smab-container: 1180px;
    --smab-container-sm: 520px;
}

/* Directional tokens — flip automatically by dir attribute */
[dir="rtl"] {
    --smab-font-body: var(--smab-font-body-ar);
    --smab-font-display: var(--smab-font-display-ar);
    --smab-start: right;
    --smab-end: left;
}
[dir="ltr"], :root:not([dir="rtl"]) {
    --smab-font-body: var(--smab-font-body-en);
    --smab-font-display: var(--smab-font-display-en);
    --smab-start: left;
    --smab-end: right;
}