/* ============================================================
   Alsaree3 — Public Design System: Tokens
   Batch F1 foundation. Arabic-first, premium, mobile-first.
   ============================================================ */

:root {
    /* ---------- Brand palette ---------- */
    --as-brand-900: #3b1809;        /* deep logo-brown for contrast */
    --as-brand-800: #743013;
    --as-brand-700: #a6400a;
    --as-brand-600: #d44f07;        /* primary logo orange */
    --as-brand-500: #c97645;        /* softened copper logo mix */
    --as-brand-400: #df996e;
    --as-brand-300: #edbea4;
    --as-brand-200: #f6d8c7;
    --as-brand-100: #fbe9df;
    --as-brand-50:  #fff7f2;
    --as-brand-900-rgb: 59, 24, 9;
    --as-brand-800-rgb: 116, 48, 19;
    --as-brand-700-rgb: 166, 64, 10;
    --as-brand-600-rgb: 212, 79, 7;
    --as-brand-500-rgb: 201, 118, 69;
    --as-brand-400-rgb: 223, 153, 110;
    --as-brand-300-rgb: 237, 190, 164;
    --as-brand-200-rgb: 246, 216, 199;
    --as-brand-100-rgb: 251, 233, 223;
    --as-brand-gradient: linear-gradient(135deg, var(--as-brand-600) 0%, var(--as-brand-500) 100%);
    --as-brand-gradient-rich: linear-gradient(135deg, var(--as-brand-800) 0%, var(--as-brand-600) 48%, var(--as-brand-500) 100%);
    --as-brand-gradient-text: linear-gradient(100deg, var(--as-brand-800) 0%, var(--as-brand-600) 45%, var(--as-brand-500) 100%);

    --as-accent-600: #d4a017;       /* warm gold accent */
    --as-accent-500: #e6b431;
    --as-accent-100: #fbf2d6;

    --as-success: #1f8a5c;
    --as-danger:  #c0392b;
    --as-warning: #e08a1a;

    /* ---------- Neutrals ---------- */
    --as-ink-900: #0e1623;
    --as-ink-800: #1a2433;
    --as-ink-700: #2c384b;
    --as-ink-600: #455065;
    --as-ink-500: #6b7588;
    --as-ink-400: #9aa3b4;
    --as-ink-300: #c7cdd8;
    --as-ink-200: #e3e7ee;
    --as-ink-100: #f1f3f7;
    --as-ink-50:  #f8fafc;
    --as-white:   #ffffff;

    /* ---------- Surfaces ---------- */
    --as-bg:        #ffffff;
    --as-bg-soft:   #f8fafc;
    --as-bg-muted:  #f1f3f7;
    --as-border:    #e3e7ee;
    --as-border-strong: #c7cdd8;

    /* ---------- Typography ---------- */
    --as-font-sans: 'Cairo', 'Segoe UI', Tahoma, Arial, sans-serif;
    --as-fs-xs:   .8125rem;   /* 13 */
    --as-fs-sm:   .9375rem;   /* 15 */
    --as-fs-base: 1rem;       /* 16 */
    --as-fs-md:   1.125rem;   /* 18 */
    --as-fs-lg:   1.375rem;   /* 22 */
    --as-fs-xl:   1.75rem;    /* 28 */
    --as-fs-2xl:  2.25rem;    /* 36 */
    --as-fs-3xl:  2.875rem;   /* 46 */
    --as-fs-4xl:  3.5rem;     /* 56 */

    --as-fw-regular:  400;
    --as-fw-medium:   500;
    --as-fw-semibold: 600;
    --as-fw-bold:     700;
    --as-fw-black:    800;

    --as-lh-tight: 1.25;
    --as-lh-snug:  1.4;
    --as-lh-base:  1.7;

    /* ---------- Spacing scale ---------- */
    --as-space-1:  .25rem;
    --as-space-2:  .5rem;
    --as-space-3:  .75rem;
    --as-space-4:  1rem;
    --as-space-5:  1.25rem;
    --as-space-6:  1.5rem;
    --as-space-7:  1.75rem;
    --as-space-8:  2rem;
    --as-space-10: 2.5rem;
    --as-space-12: 3rem;
    --as-space-14: 3.5rem;
    --as-space-16: 4rem;
    --as-space-18: 4.5rem;
    --as-space-20: 5rem;
    --as-space-24: 6rem;

    /* ---------- Radii ---------- */
    --as-radius-sm: 6px;
    --as-radius-md: 10px;
    --as-radius-lg: 14px;
    --as-radius-xl: 20px;
    --as-radius-pill: 999px;

    /* ---------- Shadows ---------- */
    --as-shadow-sm: 0 1px 2px rgba(14, 22, 35, .06), 0 1px 1px rgba(14, 22, 35, .04);
    --as-shadow-md: 0 6px 18px rgba(14, 22, 35, .08);
    --as-shadow-lg: 0 18px 40px rgba(14, 22, 35, .12);
    --as-shadow-ring: 0 0 0 .2rem rgba(var(--as-brand-600-rgb), .22);

    /* ---------- Layout ---------- */
    --as-header-height: 76px;
    --as-header-height-sm: 64px;
    --as-mobile-cta-height: 64px;
    --as-container-max: 1200px;

    /* ---------- Motion ---------- */
    --as-ease: cubic-bezier(.4, 0, .2, 1);
    --as-dur-fast: 150ms;
    --as-dur-base: 220ms;
    --as-dur-slow: 360ms;

    /* ---------- Bootstrap 5 overrides (RTL aware) ---------- */
    --bs-primary: var(--as-brand-600);
    --bs-primary-rgb: var(--as-brand-600-rgb);
    --bs-body-font-family: var(--as-font-sans);
    --bs-body-font-size: var(--as-fs-base);
    --bs-body-color: var(--as-ink-800);
    --bs-body-bg: var(--as-bg);
    --bs-border-color: var(--as-border);
    --bs-border-radius: var(--as-radius-md);
    --bs-link-color: var(--as-brand-700);
    --bs-link-hover-color: var(--as-brand-900);
}