/* ==========================================================================
   Amaaly.com - Marketing Site Design Tokens (token.css)
   Derived From The Amaaly Systems Product Token Set - Same Identity Values.
   Load Order: token.css must load BEFORE site.css on every page.
   ========================================================================== */
:root {
    /* ======================================================================
       01. BRAND COLORS (Identical To The Product)
       ====================================================================== */
    --color-brand-primary: #05445E;   /* Wordmark Navy   */
    --color-primary-rgb: 5, 68, 94;
    --color-brand-accent: #1F6FA2;    /* Logo Blue       */
    --color-brand-secondary: #02BCAD; /* Logo Teal-Green */
    --color-secondary-rgb: 2, 188, 173;
    --color-brand-cyan: #70D0C0;      /* Mint            */

    --color-primary-50: #EBF0F2;
    --color-primary-100: #DAE3E7;
    --color-primary-200: #B4C7CF;
    --color-primary-300: #8EABB7;
    --color-primary-400: #5C8596;
    --color-primary-500: #32667B;
    --color-primary-600: var(--color-brand-primary);
    --color-primary-700: #04384D;
    --color-primary-800: #032D3E;
    --color-primary-900: #02222F;

    --color-secondary-50: #EBFAF8;
    --color-secondary-100: #D9F5F3;
    --color-secondary-200: #B3EBE6;
    --color-secondary-300: #8DE1DA;
    --color-secondary-400: #5BD3CA;
    --color-secondary-600: var(--color-brand-secondary);
    --color-secondary-700: #029A8E;
    --color-secondary-800: #017C72;

    --color-accent-100: #DDE9F1;
    --color-accent-600: var(--color-brand-accent);
    --color-accent-700: #195B85;

    /* ======================================================================
       02. STATUS COLORS
       ====================================================================== */
    --color-success: #28a745;
    --color-danger: #dc3545;
    --color-danger-rgb: 220, 53, 69;
    --color-success-bg: #d4edda;
    --color-danger-bg: #f8d7da;

    /* ======================================================================
       03. NEUTRALS + UI ROLES
       ====================================================================== */
    --color-neutral-white: #ffffff;
    --color-neutral-gray-50: #f8fafc;
    --color-neutral-gray-100: #f1f5f9;
    --color-neutral-gray-200: #e2e8f0;
    --color-neutral-gray-300: #cbd5e1;
    --color-neutral-gray-400: #94a3b8;
    --color-neutral-gray-500: #64748b;
    --color-neutral-gray-600: #475569;
    --color-neutral-gray-700: #334155;

    --text-default: var(--color-brand-primary);
    --text-secondary: var(--color-neutral-gray-600);
    --text-muted: var(--color-neutral-gray-500);
    --text-inverse: var(--color-neutral-white);

    --surface-page: var(--color-neutral-gray-50);
    --surface-card: var(--color-neutral-white);
    --surface-muted: var(--color-neutral-gray-100);
    --surface-deep: var(--color-primary-700);

    --border-subtle: var(--color-neutral-gray-200);
    --color-border: var(--color-neutral-gray-300);

    --color-link: var(--color-brand-accent);
    --color-link-hover: var(--color-brand-primary);

    /* ======================================================================
       04. TYPOGRAPHY (Tajawal AR / Roboto EN - Same As The Product)
       ====================================================================== */
    --font-family-arabic: 'Tajawal';
    --font-family-english: 'Roboto';
    --font-family-base: var(--font-family-english), var(--font-family-arabic), sans-serif;

    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-md: 1.125rem;
    --font-size-lg: 1.25rem;
    --font-size-xl: 1.5rem;
    --font-size-xxl: 2rem;

    /* ---- Marketing Display Scale (Site Only) ---- */
    --display-hero: clamp(2.1rem, 4.6vw, 3.35rem);
    --display-section: clamp(1.6rem, 3vw, 2.25rem);
    --display-price: clamp(2.2rem, 4vw, 2.9rem);
    --lead-size: clamp(1.05rem, 1.6vw, 1.2rem);

    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 700;
    --font-weight-heavy: 800;

    --line-height-tight: 1.25;
    --line-height-base: 1.6;
    --line-height-relaxed: 1.8;
    --letter-spacing-wide: 0.02em;

    /* ======================================================================
       05. SHADOWS
       ====================================================================== */
    --box-shadow-xs: 0 2px 4px rgba(0,0,0,0.05);
    --box-shadow-sm: 0 0.125rem 0.25rem rgba(0,0,0,0.075);
    --box-shadow-md: 0 0.5rem 1rem rgba(0,0,0,0.15);
    --box-shadow-brand: 0 4px 12px rgba(var(--color-primary-rgb), 0.12);
    --box-shadow-menu: 0 15px 35px rgba(var(--color-primary-rgb), 0.15);
    --box-shadow-focus: 0 0 0 3px rgba(var(--color-secondary-rgb), 0.25);
    --box-shadow-cta: 0 10px 24px rgba(var(--color-primary-rgb), 0.28);
    --color-action: var(--color-brand-primary);
    --color-action-hover: var(--color-secondary-700);

    /* ======================================================================
       06. RADIUS (Same Semantic Roles As The Product)
       ====================================================================== */
    --border-radius-sm: 0.25rem;
    --border-radius-md: 0.5rem;
    --border-radius-ml: 0.75rem;
    --border-radius-lg: 1rem;
    --border-radius-xl: 1.25rem;
    --border-radius-pill: 50rem;
    --radius-control: var(--border-radius-ml);
    --radius-control-sm: var(--border-radius-md);
    --radius-surface: var(--border-radius-xl);
    --border-width: 1px;
    --border-width-md: 2px;

    /* ======================================================================
       07. LAYOUT + SPACING (Site Rhythm)
       ====================================================================== */
    --container-max: 1140px;
    --container-pad: clamp(1rem, 4vw, 1.5rem);
    --section-pad: clamp(3.5rem, 8vw, 6.25rem);
    --header-height: 76px;
    --input-height: 44px;
    --input-height-lg: 56px;

    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-ms: 0.75rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-xxl: 2.5rem;
    --spacing-3xl: 3rem;

    /* ======================================================================
       08. TRANSITIONS + LAYERS
       ====================================================================== */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --z-index-header: 99;
    --z-index-nav: 100;
    --z-index-overlay: 110;
}

/* ==========================================================================
   DIRECTION-AWARE TOKEN OVERRIDES (RTL)
   Arabic (Tajawal): Family-First Swap, Taller Line Rhythm, Zero Tracking.
   ========================================================================== */
[dir="rtl"] {
    --font-family-base: var(--font-family-arabic), var(--font-family-english), sans-serif;
    --line-height-base: 1.7;
    --letter-spacing-wide: 0;
}