/* ════════════════════════════════════════════════════════════════════════
   Thamino — ثمينو  ·  Central brand theme
   Spend Smarter. Buy Better.  ·  اصرف بذكاء. واشترِ الأفضل.
   ════════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Cairo:wght@400;500;600;700;800&display=swap');

:root {
    /* ── Brand palette ── */
    --brand-primary:       #0D1117;   /* dark navy — primary text & important actions */
    --brand-primary-2:     #1F2937;   /* navy hover / lighter */
    --brand-accent:        #22C7A5;   /* mint — active states & highlights */
    --brand-accent-dark:   #15A88B;   /* mint hover */
    --brand-accent-light:  #E6F7F1;   /* light mint surface */
    --brand-bg:            #F3F4F6;   /* soft gray app background */
    --brand-card:          #FFFFFF;   /* card / surface */
    --brand-surface-2:     #F9FAFB;   /* subtle inner surface */
    --brand-text:          #111827;   /* main text */
    --brand-muted:         #6B7280;   /* muted text */
    --brand-border:        #E5E7EB;   /* hairline border */

    /* ── Status ── */
    --brand-success:       #16A34A;
    --brand-warning:       #D97706;
    --brand-danger:        #DC2626;

    /* ── Shape & depth ── */
    --brand-radius:        20px;
    --brand-radius-sm:     14px;
    --brand-radius-lg:     24px;
    --brand-shadow:        0 1px 2px rgba(13, 17, 23, .04), 0 8px 24px rgba(13, 17, 23, .06);
    --brand-shadow-lg:     0 14px 44px rgba(13, 17, 23, .14);
    --brand-shadow-accent: 0 10px 24px rgba(34, 199, 165, .28);

    /* ── Typography ── */
    --brand-font-en: 'Inter', system-ui, -apple-system, "Segoe UI", sans-serif, 'SaudiRiyal';
    --brand-font-ar: 'Cairo', system-ui, "Segoe UI", sans-serif, 'SaudiRiyal';
}

/* Official Saudi Riyal sign (U+20C1). Most system fonts don't include the
   glyph yet, so we ship a tiny single-glyph font that maps ONLY U+20C1
   (MIT — see /fonts/LICENSE-saudi_riyal.txt). It sits LAST in the font
   stacks: per-character fallback reaches it only for the riyal sign, so it
   can never affect any other character. */
@font-face {
    font-family: 'SaudiRiyal';
    src: url('/fonts/saudi_riyal.woff2') format('woff2'),
         url('/fonts/saudi_riyal.ttf') format('truetype');
    unicode-range: U+20C1;
    font-display: swap;
}

/* Latin (default) uses Inter; Arabic / RTL uses Cairo. */
html, body { font-family: var(--brand-font-en); }
[dir="rtl"] body,
[lang="ar"] body { font-family: var(--brand-font-ar); }