/* ═══════════════════════════════════════════════════════════
   AL-MAJD AL-TALED DESIGN SYSTEM v1.0
   Premium Construction Brand Identity
   ═══════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────────────────────
   1. COLOR TOKENS
   ────────────────────────────────────────────────────────────── */

:root {
  /* PRIMARY COLORS */
  --color-primary-gold:        #D4A76A;
  --color-primary-gold-dark:   #B8915A;
  --color-primary-gold-light:  #E0B87A;
  --color-primary-gold-pale:   rgba(212, 167, 106, 0.12);

  /* CORPORATE NAVY */
  --color-navy:                #0D1B3E;
  --color-navy-dark:           #050D20;
  --color-navy-light:          #1A2E5C;
  --color-navy-50:             rgba(13, 27, 62, 0.05);
  --color-navy-10:             rgba(13, 27, 62, 0.10);

  /* ACCENT BLUE */
  --color-blue:                #1E5BA8;
  --color-blue-dark:           #154080;
  --color-blue-light:          #2A6FBF;

  /* NEUTRAL PALETTE */
  --color-gray-light:          #F5F7FA;
  --color-gray-lighter:        #F9F9F9;
  --color-white:               #FFFFFF;
  --color-text-primary:        #0D1B3E;
  --color-text-secondary:      #666666;
  --color-text-tertiary:       #999999;
  --color-border:              #E8E8E8;
  --color-border-light:        #F0F0F0;

  /* SEMANTIC COLORS */
  --color-success:             #22C55E;
  --color-warning:             #F59E0B;
  --color-error:               #EF4444;
  --color-info:                #3B82F6;

  /* SURFACES */
  --color-surface-primary:     #FFFFFF;
  --color-surface-secondary:   #F5F7FA;
  --color-surface-tertiary:    #EBEBEB;
}

/* ──────────────────────────────────────────────────────────────
   2. TYPOGRAPHY TOKENS
   ────────────────────────────────────────────────────────────── */

:root {
  /* FONT FAMILIES */
  --font-primary:              'Arial', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-monospace:            'Courier New', monospace;

  /* TYPE SCALE - Fluid */
  --text-xs:                   clamp(0.75rem, 1vw, 0.875rem);
  --text-sm:                   clamp(0.875rem, 1.1vw, 1rem);
  --text-base:                 clamp(1rem, 1.2vw, 1.125rem);
  --text-lg:                   clamp(1.125rem, 1.4vw, 1.25rem);
  --text-xl:                   clamp(1.25rem, 1.6vw, 1.5rem);
  --text-2xl:                  clamp(1.5rem, 2vw, 1.875rem);
  --text-3xl:                  clamp(1.875rem, 2.5vw, 2.25rem);
  --text-4xl:                  clamp(2.25rem, 3.2vw, 3rem);
  --text-5xl:                  clamp(2.8rem, 4.5vw, 3.75rem);
  --text-6xl:                  clamp(3.5rem, 6vw, 4.5rem);

  /* FONT WEIGHTS */
  --weight-normal:             400;
  --weight-bold:               700;

  /* LINE HEIGHTS */
  --line-height-tight:         1.2;
  --line-height-normal:        1.5;
  --line-height-relaxed:       1.75;
  --line-height-loose:         2;

  /* LETTER SPACING */
  --letter-spacing-tight:      -0.02em;
  --letter-spacing-normal:     0;
  --letter-spacing-wide:       0.05em;
  --letter-spacing-wider:      0.1em;
}

/* ──────────────────────────────────────────────────────────────
   3. SPACING TOKENS (8px Grid)
   ────────────────────────────────────────────────────────────── */

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

  /* SECTION PADDING */
  --section-py-sm:             var(--space-12);
  --section-py-md:             var(--space-16);
  --section-py-lg:             var(--space-24);
  --section-px:                var(--space-6);
}

/* ──────────────────────────────────────────────────────────────
   4. BORDER RADIUS TOKENS
   ────────────────────────────────────────────────────────────── */

:root {
  --radius-none:               0;
  --radius-xs:                 0.25rem;  /* 4px */
  --radius-sm:                 0.5rem;   /* 8px */
  --radius-md:                 0.75rem;  /* 12px */
  --radius-lg:                 1rem;     /* 16px */
  --radius-xl:                 1.5rem;   /* 24px */
  --radius-2xl:                2rem;     /* 32px */
  --radius-full:               9999px;
}

/* ──────────────────────────────────────────────────────────────
   5. SHADOW SYSTEM (Elevation)
   ────────────────────────────────────────────────────────────── */

:root {
  --shadow-none:               none;

  --shadow-xs:                 0 1px 2px 0 rgba(13, 27, 62, 0.05);

  --shadow-sm:                 0 1px 3px 0 rgba(13, 27, 62, 0.08),
                               0 1px 2px -1px rgba(13, 27, 62, 0.06);

  --shadow-md:                 0 4px 6px -1px rgba(13, 27, 62, 0.10),
                               0 2px 4px -2px rgba(13, 27, 62, 0.08);

  --shadow-lg:                 0 10px 15px -3px rgba(13, 27, 62, 0.12),
                               0 4px 6px -4px rgba(13, 27, 62, 0.08);

  --shadow-xl:                 0 20px 25px -5px rgba(13, 27, 62, 0.15),
                               0 8px 10px -6px rgba(13, 27, 62, 0.10);

  --shadow-2xl:                0 25px 50px -12px rgba(13, 27, 62, 0.20);

  /* GOLD GLOW */
  --shadow-gold:               0 0 20px rgba(212, 167, 106, 0.30);
  --shadow-gold-sm:            0 0 10px rgba(212, 167, 106, 0.20);
}

/* ──────────────────────────────────────────────────────────────
   6. TRANSITION & ANIMATION TOKENS
   ────────────────────────────────────────────────────────────── */

:root {
  /* DURATIONS */
  --duration-fast:             150ms;
  --duration-base:             250ms;
  --duration-slow:             400ms;
  --duration-slower:           600ms;

  /* EASING */
  --ease-in:                   cubic-bezier(0.4, 0, 1, 1);
  --ease-out:                  cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out:               cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring:               cubic-bezier(0.34, 1.56, 0.64, 1);

  /* STANDARD TRANSITIONS */
  --transition-fast:           var(--duration-fast) var(--ease-in-out);
  --transition-base:           var(--duration-base) var(--ease-in-out);
  --transition-slow:           var(--duration-slow) var(--ease-in-out);
}

/* ──────────────────────────────────────────────────────────────
   7. BREAKPOINT TOKENS
   ────────────────────────────────────────────────────────────── */

:root {
  --breakpoint-xs:             320px;
  --breakpoint-sm:             640px;
  --breakpoint-md:             768px;
  --breakpoint-lg:             1024px;
  --breakpoint-xl:             1280px;
  --breakpoint-2xl:            1536px;

  /* CONTAINER WIDTHS */
  --container-sm:              640px;
  --container-md:              768px;
  --container-lg:              1024px;
  --container-xl:              1280px;
  --container-2xl:             1400px;
}

/* ──────────────────────────────────────────────────────────────
   8. Z-INDEX SCALE
   ────────────────────────────────────────────────────────────── */

:root {
  --z-hide:                    -1;
  --z-base:                    0;
  --z-dropdown:                100;
  --z-sticky:                  200;
  --z-fixed:                   300;
  --z-modal-backdrop:          400;
  --z-modal:                   500;
  --z-popover:                 600;
  --z-tooltip:                 700;
  --z-notification:            800;
}

/* ──────────────────────────────────────────────────────────────
   9. BUTTON TOKENS
   ────────────────────────────────────────────────────────────── */

:root {
  /* BUTTON SIZES */
  --btn-height-xs:             2rem;     /* 32px */
  --btn-height-sm:             2.5rem;   /* 40px */
  --btn-height-md:             3rem;     /* 48px */
  --btn-height-lg:             3.5rem;   /* 56px */

  /* BUTTON PADDING */
  --btn-px-xs:                 0.75rem;
  --btn-px-sm:                 1rem;
  --btn-px-md:                 1.5rem;
  --btn-px-lg:                 2rem;
}

/* ──────────────────────────────────────────────────────────────
   10. FORM TOKENS
   ────────────────────────────────────────────────────────────── */

:root {
  /* INPUT HEIGHTS */
  --input-height:              3rem;     /* 48px */
  --input-height-sm:           2.5rem;   /* 40px */
  --input-height-lg:           3.5rem;   /* 56px */

  /* INPUT PADDING */
  --input-px:                  1rem;
  --input-py:                  0.75rem;

  /* FOCUS */
  --focus-outline:             2px solid var(--color-primary-gold);
  --focus-outline-offset:      2px;
}

/* ──────────────────────────────────────────────────────────────
   11. UTILITY CLASSES
   ────────────────────────────────────────────────────────────── */

.container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--section-px);
  padding-right: var(--section-px);
}

@media (min-width: 640px) {
  .container {
    max-width: 640px;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 768px;
  }
}

@media (min-width: 1024px) {
  .container {
    max-width: 1024px;
  }
}

@media (min-width: 1280px) {
  .container {
    max-width: 1280px;
  }
}

@media (min-width: 1536px) {
  .container {
    max-width: 1400px;
  }
}

/* SPACING UTILITIES */
.mt-xs { margin-top: var(--space-1); }
.mt-sm { margin-top: var(--space-2); }
.mt-md { margin-top: var(--space-4); }
.mt-lg { margin-top: var(--space-8); }
.mt-xl { margin-top: var(--space-12); }
.mt-2xl { margin-top: var(--space-16); }

.mb-xs { margin-bottom: var(--space-1); }
.mb-sm { margin-bottom: var(--space-2); }
.mb-md { margin-bottom: var(--space-4); }
.mb-lg { margin-bottom: var(--space-8); }
.mb-xl { margin-bottom: var(--space-12); }
.mb-2xl { margin-bottom: var(--space-16); }

.px-4 { padding: 0 var(--space-4); }
.py-4 { padding: var(--space-4) 0; }

/* DISPLAY UTILITIES */
.flex { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.grid { display: grid; }

/* TEXT UTILITIES */
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-left { text-align: left; }

/* OPACITY */
.opacity-50 { opacity: 0.5; }
.opacity-75 { opacity: 0.75; }

/* ──────────────────────────────────────────────────────────────
   ACCESSIBILITY — REDUCED MOTION (global)
   Honours prefers-reduced-motion: collapse animations/transitions.
   ────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ══════════════════════════════════════════════════════════════ */