/**
 * Design Tokens — Almutaheda Pack
 *
 * All brand values live here as CSS custom properties.
 * Never hardcode these values in component files.
 * Consumed by every other stylesheet via var().
 */

:root {

	/* ─── Color palette ──────────────────────────────────────────── */

	--alm-color-navy-primary:   #0E223A;
	--alm-color-navy-secondary: #1B2F4A;
	--alm-color-sand:           #C79A56;
	--alm-color-beige:          #F5F1EA;
	--alm-color-border:         #E6E8EC;
	--alm-color-white:          #FFFFFF;

	/* Semantic status */
	--alm-color-success:        #1F7A5C;
	--alm-color-success-bg:     #ECFDF5;
	--alm-color-warning:        #B7791F;
	--alm-color-warning-bg:     #FFFBEB;
	--alm-color-error:          #C53030;
	--alm-color-error-bg:       #FFF5F5;
	--alm-color-info:           #2B6CB0;
	--alm-color-info-bg:        #EBF8FF;

	/* Tints derived from primary palette */
	--alm-color-navy-primary-90:  #233A55;
	--alm-color-navy-primary-10:  #E9EEF3;
	--alm-color-sand-dark:        #A97839;
	--alm-color-sand-light:       #F3E8D8;

	/* Text hierarchy */
	--alm-color-text-primary:    #0E223A;
	--alm-color-text-secondary:  #46566A;
	--alm-color-text-muted:      #6C7888;
	--alm-color-text-inverse:    #FFFFFF;
	--alm-color-text-link:       #0E223A;
	--alm-color-text-link-hover: #A97839;

	/* Surface hierarchy */
	--alm-color-surface-page:    #FCFBF9;
	--alm-color-surface-raised:  #FFFFFF;
	--alm-color-surface-subtle:  #F5F1EA;
	--alm-color-surface-overlay: rgba(14, 34, 58, 0.62);

	/* ─── Typography ─────────────────────────────────────────────── */

	/* Font families — loaded externally, never bundled here */
	--alm-font-arabic:  'Alexandria', 'Segoe UI', Tahoma, sans-serif;
	--alm-font-latin:   'Inter', 'Segoe UI', system-ui, sans-serif;
	--alm-font-mono:    'Consolas', 'Courier New', monospace;

	/* Scale — uses a 1.25 (Major Third) ratio anchored at 16px */
	--alm-text-xs:   0.75rem;   /* 12px */
	--alm-text-sm:   0.875rem;  /* 14px */
	--alm-text-base: 1rem;      /* 16px */
	--alm-text-md:   1.125rem;  /* 18px */
	--alm-text-lg:   1.25rem;   /* 20px */
	--alm-text-xl:   1.5rem;    /* 24px */
	--alm-text-2xl:  1.875rem;  /* 30px */
	--alm-text-3xl:  2.25rem;   /* 36px */
	--alm-text-4xl:  3rem;      /* 48px */

	/* Line heights */
	--alm-leading-tight:  1.25;
	--alm-leading-snug:   1.375;
	--alm-leading-normal: 1.6;
	--alm-leading-relaxed:1.75;

	/* Font weights */
	--alm-weight-regular:  400;
	--alm-weight-medium:   500;
	--alm-weight-semibold: 600;
	--alm-weight-bold:     700;

	/* ─── Spacing scale (4px base) ──────────────────────────────── */

	--alm-space-0:    0;
	--alm-space-px:   1px;
	--alm-space-0-5:  0.125rem;  /* 2px  */
	--alm-space-1:    0.25rem;   /* 4px  */
	--alm-space-1-5:  0.375rem;  /* 6px  */
	--alm-space-2:    0.5rem;    /* 8px  */
	--alm-space-2-5:  0.625rem;  /* 10px */
	--alm-space-3:    0.75rem;   /* 12px */
	--alm-space-4:    1rem;      /* 16px */
	--alm-space-5:    1.25rem;   /* 20px */
	--alm-space-6:    1.5rem;    /* 24px */
	--alm-space-7:    1.75rem;   /* 28px */
	--alm-space-8:    2rem;      /* 32px */
	--alm-space-10:   2.5rem;    /* 40px */
	--alm-space-12:   3rem;      /* 48px */
	--alm-space-16:   4rem;      /* 64px */
	--alm-space-20:   5rem;      /* 80px */
	--alm-space-24:   6rem;      /* 96px */

	/* ─── Border radius ──────────────────────────────────────────── */

	--alm-radius-none:  0;
	--alm-radius-sm:    0.25rem;   /* 4px  */
	--alm-radius-md:    0.625rem;    /* 8px  */
	--alm-radius-lg:    0.875rem;   /* 12px */
	--alm-radius-xl:    1.125rem;      /* 16px */
	--alm-radius-2xl:   1.75rem;    /* 24px */
	--alm-radius-full:  9999px;

	/* ─── Shadows ────────────────────────────────────────────────── */

	--alm-shadow-xs:  0 1px 2px rgba(14, 34, 58, 0.05);
	--alm-shadow-sm:  0 2px 8px rgba(14, 34, 58, 0.07);
	--alm-shadow-md:  0 8px 24px rgba(14, 34, 58, 0.10);
	--alm-shadow-lg:  0 18px 44px rgba(14, 34, 58, 0.13);
	--alm-shadow-xl:  0 28px 72px rgba(14, 34, 58, 0.17);
	--alm-shadow-inner: inset 0 1px 3px rgba(14, 34, 58, 0.08);

	/* ─── Borders ────────────────────────────────────────────────── */

	--alm-border-width:    1px;
	--alm-border-width-2:  2px;
	--alm-border-color:    var(--alm-color-border);
	--alm-border-standard: var(--alm-border-width) solid var(--alm-border-color);

	/* ─── Fluid typography scale ─────────────────────────────────── */

	--alm-text-display: clamp(2.5rem, 6vw + 0.5rem, 4rem);    /* 40–64px */
	--alm-text-4xl:     clamp(2rem,   4vw + 0.5rem, 3rem);    /* 32–48px */
	--alm-text-3xl:     clamp(1.625rem, 3vw + 0.25rem, 2.25rem); /* 26–36px */
	--alm-text-2xl:     clamp(1.375rem, 2.5vw + 0.25rem, 1.875rem); /* 22–30px */
	--alm-text-xl:      clamp(1.125rem, 1.5vw + 0.25rem, 1.5rem); /* 18–24px */

	/* Semantic role tokens */
	--alm-type-display-size: var(--alm-text-display);
	--alm-type-h1-size:      var(--alm-text-4xl);
	--alm-type-h2-size:      var(--alm-text-3xl);
	--alm-type-h3-size:      var(--alm-text-xl);
	--alm-type-body-size:    var(--alm-text-base);
	--alm-type-small-size:   var(--alm-text-sm);

	/* Line-height semantic roles */
	--alm-leading-tight:    1.2;
	--alm-leading-heading:  1.3;
	--alm-leading-body:     1.65;
	--alm-leading-relaxed:  1.8;

	/* Arabic-specific: looser for readability at small sizes */
	--alm-leading-arabic-body: 1.75;

	/* Max reading width (≈65 Arabic characters at 1rem) */
	--alm-readable-max: 65ch;

	/* ─── Motion system ───────────────────────────────────────────── */

	--alm-motion-fast:    160ms;
	--alm-motion-base:    280ms;
	--alm-motion-slow:    520ms;
	--alm-ease-standard:  cubic-bezier(0.4, 0, 0.2, 1);
	--alm-ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
	--alm-ease-exit:       cubic-bezier(0.4, 0, 1, 1);
	--alm-distance-sm:    10px;
	--alm-distance-md:    20px;
	--alm-distance-lg:    40px;

	/* ─── Transitions ────────────────────────────────────────────── */

	--alm-duration-fast:   100ms;
	--alm-duration-base:   200ms;
	--alm-duration-slow:   300ms;
	--alm-easing-standard: cubic-bezier(0.4, 0, 0.2, 1);

	/* ─── Z-index layers ─────────────────────────────────────────── */

	--alm-z-below:   -1;
	--alm-z-base:     0;
	--alm-z-raised:   10;
	--alm-z-dropdown: 100;
	--alm-z-sticky:   200;
	--alm-z-overlay:  300;
	--alm-z-modal:    400;
	--alm-z-toast:    500;

	/* ─── Layout ─────────────────────────────────────────────────── */

	--alm-container-sm:  640px;
	--alm-container-md:  768px;
	--alm-container-lg:  1024px;
	--alm-container-xl:  1280px;
	--alm-container-2xl: 1440px;

	--alm-container-padding-x: var(--alm-space-4);
	--alm-grid-gap:            var(--alm-space-6);

	/* ─── Focus ring ─────────────────────────────────────────────── */

	--alm-focus-ring-width:  3px;
	--alm-focus-ring-color:  var(--alm-color-sand);
	--alm-focus-ring-offset: 2px;

	/* ─── Form controls ──────────────────────────────────────────── */

	--alm-input-height:       2.75rem;   /* 44px — minimum touch target */
	--alm-input-padding-x:    var(--alm-space-4);
	--alm-input-padding-y:    var(--alm-space-2-5);
	--alm-input-border:       var(--alm-border-standard);
	--alm-input-border-focus: var(--alm-border-width-2) solid var(--alm-color-navy-primary);
	--alm-input-radius:       var(--alm-radius-lg);
	--alm-input-bg:           var(--alm-color-white);
	--alm-input-bg-disabled:  #F0F1F3;
	--alm-input-color:        var(--alm-color-text-primary);
	--alm-input-placeholder:  var(--alm-color-text-muted);

	/* ─── Button tokens ──────────────────────────────────────────── */

	--alm-btn-height:     2.75rem;  /* 44px */
	--alm-btn-padding-x:  var(--alm-space-6);
	--alm-btn-padding-y:  var(--alm-space-2-5);
	--alm-btn-radius:     var(--alm-radius-lg);
	--alm-btn-font-size:  var(--alm-text-base);
	--alm-btn-font-weight:var(--alm-weight-semibold);
	--alm-btn-gap:        var(--alm-space-2);
	--alm-btn-transition: background-color var(--alm-duration-base) var(--alm-easing-standard),
	                      border-color var(--alm-duration-base) var(--alm-easing-standard),
	                      color var(--alm-duration-base) var(--alm-easing-standard),
	                      box-shadow var(--alm-duration-base) var(--alm-easing-standard),
	                      opacity var(--alm-duration-base) var(--alm-easing-standard);
	/* ─── Brand surfaces and interaction accents ─────────────────── */

	--alm-color-copper:           #C79A56;
	--alm-color-copper-deep:      #A97839;
	--alm-color-ivory:            #F5F1EA;
	--alm-color-surface-warm:     #FAF7F2;
	--alm-color-surface-dark:     #0E223A;
	--alm-color-border-strong:    #CCD2D9;
	--alm-color-whatsapp:         #168B5B;
	--alm-color-whatsapp-hover:   #0F7048;

	/* Comfortable content widths */
	--alm-content-readable: 42rem;
	--alm-content-wide:     72rem;

	/* Section rhythm */
	--alm-section-space-sm: clamp(2.5rem, 6vw, 4rem);
	--alm-section-space:    clamp(3.5rem, 8vw, 6.5rem);
	--alm-section-space-lg: clamp(4.5rem, 10vw, 8rem);

}

/* ─── Responsive container padding adjustment ──────────────────── */

@media (min-width: 768px) {
	:root {
		--alm-container-padding-x: var(--alm-space-8);
	}
}

@media (min-width: 1024px) {
	:root {
		--alm-container-padding-x: var(--alm-space-12);
	}
}