/* =============================================================
   Khafif Design System — Modern Business
   =============================================================
   Foundation layer: design tokens (colors, typography, spacing,
   borders, shadows, transitions). Everything else builds on this.

   Philosophy: refined minimalism with intentional details.
   Inspired by: Stripe, Linear, Vercel — adapted for Arabic RTL
   service businesses.

   Token naming convention:
     --kh-{category}-{role}-{variant}

   Examples:
     --kh-color-text          (default text)
     --kh-color-text-soft     (secondary text)
     --kh-color-accent        (brand accent)
   ============================================================= */

:root {

	/* ============================================================
	   COLOR SYSTEM
	   ============================================================
	   Restrained palette. One primary accent (refined gold —
	   honors the existing brand) on neutral backgrounds. Heavy use
	   of subtle grays for hierarchy without competing for attention.

	   Designed for AA contrast ratios at minimum on all combinations.
	*/

	/* Neutrals — the foundation */
	--kh-color-bg:          #ffffff;   /* Page background */
	--kh-color-bg-soft:     #fafafa;   /* Alternative surfaces, section dividers */
	--kh-color-bg-muted:    #f4f4f5;   /* Disabled states, code blocks */

	/* Surface colors (cards, panels) */
	--kh-color-surface:     #ffffff;

	/* Text — five levels of hierarchy */
	--kh-color-text:        #09090b;   /* Headings, primary text */
	--kh-color-text-strong: #18181b;   /* Body that needs emphasis */
	--kh-color-text-soft:   #52525b;   /* Secondary, descriptions */
	--kh-color-text-mute:   #a1a1aa;   /* Tertiary, metadata */
	--kh-color-text-faint:  #d4d4d8;   /* Decorative, dividers */

	/* Borders — subtle hierarchy */
	--kh-color-border:      #e4e4e7;
	--kh-color-border-soft: #f1f1f4;
	--kh-color-border-strong: #d4d4d8;

	/* Brand accent — refined gold */
	--kh-color-accent:        #c19a4b;
	--kh-color-accent-hover:  #a07e36;
	--kh-color-accent-soft:   #faf5e8;   /* Tinted background */
	--kh-color-accent-strong: #6f5520;   /* Text on light bg */

	/* State colors */
	--kh-color-success:        #047857;
	--kh-color-success-soft:   #ecfdf5;
	--kh-color-danger:         #b91c1c;
	--kh-color-danger-soft:    #fef2f2;
	--kh-color-warning:        #b45309;
	--kh-color-warning-soft:   #fffbeb;
	--kh-color-info:           #1d4ed8;
	--kh-color-info-soft:      #eff6ff;

	/* Focus ring (accessibility) */
	--kh-color-focus-ring:    rgba(193, 154, 75, 0.35);

	/* WhatsApp brand (kept from original) */
	--kh-color-whatsapp:        #25d366;
	--kh-color-whatsapp-hover:  #1ebe5d;


	/* ============================================================
	   TYPOGRAPHY
	   ============================================================
	   Two font families: a refined heading face (Cairo) and an
	   excellent body face (Tajawal). Both designed for Arabic and
	   English at high quality.

	   Scale: based on the perfect fourth (1.333). Tighter than
	   default for a more dense, professional feel.

	   Line heights: roomy for body text (good for Arabic reading),
	   tight for headings (avoids excess vertical space).
	*/

	--kh-font-body:    'Cairo', 'Tahoma', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--kh-font-heading: 'Cairo', 'Tahoma', system-ui, sans-serif;
	--kh-font-mono:    ui-monospace, 'SF Mono', 'Cascadia Code', 'Roboto Mono', Consolas, monospace;

	/* Type scale */
	--kh-text-xs:    0.8125rem;   /* 13px - metadata, captions */
	--kh-text-sm:    0.9375rem;   /* 15px - small text, table data */
	--kh-text-base:  1rem;        /* 16px - body text */
	--kh-text-lg:    1.125rem;    /* 18px - emphasized body */
	--kh-text-xl:    1.25rem;     /* 20px - small headings */
	--kh-text-2xl:   1.5rem;      /* 24px - h3 */
	--kh-text-3xl:   1.875rem;    /* 30px - h2 */
	--kh-text-4xl:   2.25rem;     /* 36px - h1 */
	--kh-text-5xl:   3rem;        /* 48px - hero */
	--kh-text-6xl:   3.75rem;     /* 60px - oversized hero */

	/* Line heights */
	--kh-leading-tight:   1.2;     /* Tight, for large headings */
	--kh-leading-snug:    1.35;    /* Small headings, dense UI */
	--kh-leading-normal:  1.5;     /* UI labels */
	--kh-leading-relaxed: 1.7;     /* Body text — comfortable Arabic */
	--kh-leading-loose:   1.9;     /* Long-form content */

	/* Font weights */
	--kh-weight-normal:   400;
	--kh-weight-medium:   500;
	--kh-weight-semibold: 600;
	--kh-weight-bold:     700;

	/* Letter spacing */
	--kh-tracking-tight: -0.015em;  /* Large headings */
	--kh-tracking-normal: 0;
	--kh-tracking-wide:  0.025em;   /* All-caps labels */


	/* ============================================================
	   SPACING SCALE
	   ============================================================
	   8px-based grid (rem equivalents). The most common values are
	   1-8; larger values for section-level spacing.

	   Use semantic aliases (--kh-space-section) when a specific
	   spacing has a known purpose.
	*/

	--kh-space-px:  1px;
	--kh-space-0:   0;
	--kh-space-1:   0.25rem;   /*  4px */
	--kh-space-2:   0.5rem;    /*  8px */
	--kh-space-3:   0.75rem;   /* 12px */
	--kh-space-4:   1rem;      /* 16px */
	--kh-space-5:   1.25rem;   /* 20px */
	--kh-space-6:   1.5rem;    /* 24px */
	--kh-space-8:   2rem;      /* 32px */
	--kh-space-10:  2.5rem;    /* 40px */
	--kh-space-12:  3rem;      /* 48px */
	--kh-space-16:  4rem;      /* 64px */
	--kh-space-20:  5rem;      /* 80px */
	--kh-space-24:  6rem;      /* 96px */
	--kh-space-32:  8rem;      /* 128px */

	/* Semantic aliases */
	--kh-space-section: var(--kh-space-20);   /* Between major sections */
	--kh-space-block:   var(--kh-space-8);    /* Between content blocks */
	--kh-space-paragraph: var(--kh-space-4);  /* Between paragraphs */


	/* ============================================================
	   BORDER RADIUS
	   ============================================================
	   Subtle on small elements, slightly more on cards.
	   Avoid pill-shaped or fully rounded — they feel less professional.
	*/

	--kh-radius-none:  0;
	--kh-radius-sm:    4px;     /* Inputs, small buttons */
	--kh-radius-md:    6px;     /* Default buttons */
	--kh-radius-lg:    8px;     /* Cards */
	--kh-radius-xl:    12px;    /* Modals, prominent panels */
	--kh-radius-full:  9999px;  /* Avatars, pill chips (use sparingly) */


	/* ============================================================
	   SHADOWS
	   ============================================================
	   VERY subtle. Modern Business uses borders for hierarchy
	   more than shadows. Reserve shadows for hover states or
	   floating elements.
	*/

	--kh-shadow-none:  none;
	--kh-shadow-sm:    0 1px 2px 0 rgba(0, 0, 0, 0.04);
	--kh-shadow-md:    0 1px 3px 0 rgba(0, 0, 0, 0.06), 0 1px 2px -1px rgba(0, 0, 0, 0.04);
	--kh-shadow-lg:    0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.04);
	--kh-shadow-xl:    0 10px 15px -3px rgba(0, 0, 0, 0.06), 0 4px 6px -4px rgba(0, 0, 0, 0.04);

	/* Inner shadows (used on inputs for depth) */
	--kh-shadow-inner: inset 0 1px 2px 0 rgba(0, 0, 0, 0.05);


	/* ============================================================
	   TRANSITIONS
	   ============================================================
	   Fast but smooth. Modern Business should feel responsive
	   without feeling sluggish.
	*/

	--kh-transition-fast:   100ms cubic-bezier(0.4, 0, 0.2, 1);
	--kh-transition:        150ms cubic-bezier(0.4, 0, 0.2, 1);
	--kh-transition-slow:   300ms cubic-bezier(0.4, 0, 0.2, 1);


	/* ============================================================
	   LAYOUT
	   ============================================================
	*/

	--kh-container-sm:  640px;
	--kh-container-md:  768px;
	--kh-container-lg:  1024px;
	--kh-container-xl:  1200px;     /* Default container */
	--kh-container-2xl: 1400px;     /* Wide layouts */

	--kh-prose: 68ch;               /* Optimal reading width */

	/* Header heights */
	--kh-header-height: 72px;


	/* ============================================================
	   Z-INDEX SCALE
	   ============================================================
	*/

	--kh-z-base:     0;
	--kh-z-sticky:   100;
	--kh-z-fixed:    200;
	--kh-z-overlay:  300;
	--kh-z-modal:    400;
	--kh-z-popover:  500;
	--kh-z-toast:    600;
}


/* ===== Legacy variable bridge =====
   Keep older variable names working so we don't break existing
   templates that reference them. Map to the new system.
   These can be removed in a future release once all templates
   migrate to the new names.
*/

:root {
	--khafif-primary:     var(--kh-color-text);
	--khafif-accent:      var(--kh-color-accent);
	--khafif-text:        var(--kh-color-text);
	--khafif-text-muted:  var(--kh-color-text-soft);
	--khafif-text-light:  var(--kh-color-text-mute);
	--khafif-bg:          var(--kh-color-bg);
	--khafif-bg-alt:      var(--kh-color-bg-soft);
	--khafif-border:      var(--kh-color-border);
	--khafif-whatsapp:        var(--kh-color-whatsapp);
	--khafif-whatsapp-hover:  var(--kh-color-whatsapp-hover);
	--khafif-font-base:       var(--kh-font-body);
}