/**
 * MBRSC DDA Theme — dds-tokens.css
 *
 * Dubai Design System (DDS) Compliance Token Layer
 * Source: https://designsystem.dubai.ae
 *
 * This file:
 *  1. Declares all official DDS color variables (--dda-primary-*, --dda-secondary-*)
 *  2. Maps them to semantic MBRSC tokens (--mbrsc-color-*)
 *  3. Declares DDS-compliant typography scale (Minor Third 1.2)
 *  4. Declares DDS-compliant breakpoints & layout tokens
 *  5. Declares DDS-compliant spacing scale
 *  6. Implements Dark Mode via [data-theme="dark"]
 *
 * @package MBRSC_DDA_Theme
 * @version 2.0.0 — DDS Compliant
 */

/* =============================================================================
   1. DDS OFFICIAL COLOR PALETTE — Material Design 3 Tonal System
      Source: https://designsystem.dubai.ae/developers/color-variables.md
      Primary seed: MBRSC Blue (#0a2463) — generated via DDS Color Generator
   ============================================================================= */

:root {

  /* ── DDS Primary Tonal Palette (MBRSC Blue seed) ─────────────────────── */
  --dda-primary-0:   #000000;
  --dda-primary-4:   #000C1F;
  --dda-primary-5:   #000F26;
  --dda-primary-6:   #00112B;
  --dda-primary-10:  #001A3D;
  --dda-primary-12:  #001E47;
  --dda-primary-17:  #002860;
  --dda-primary-20:  #002E6E;
  --dda-primary-22:  #003278;
  --dda-primary-24:  #003781;
  --dda-primary-25:  #003985;
  --dda-primary-30:  #0a2463;
  --dda-primary-35:  #1A3A7A;
  --dda-primary-40:  #2A4F91;
  --dda-primary-50:  #4A6DB5;
  --dda-primary-60:  #6A8DD9;
  --dda-primary-70:  #8AADFD;
  --dda-primary-80:  #AFC4FF;
  --dda-primary-87:  #CCDAFF;
  --dda-primary-90:  #D8E2FF;
  --dda-primary-92:  #E0E8FF;
  --dda-primary-94:  #E8EEFF;
  --dda-primary-95:  #EEF0FF;
  --dda-primary-96:  #F2F4FF;
  --dda-primary-98:  #F8F9FF;
  --dda-primary-99:  #FDFBFF;
  --dda-primary-100: #FFFFFF;

  /* ── DDS Secondary Tonal Palette (DDS spec default) ──────────────────── */
  --dda-secondary-0:   #000000;
  --dda-secondary-4:   #000836;
  --dda-secondary-5:   #000A3D;
  --dda-secondary-6:   #000C43;
  --dda-secondary-10:  #001257;
  --dda-secondary-12:  #001561;
  --dda-secondary-17:  #092072;
  --dda-secondary-20:  #132778;
  --dda-secondary-22:  #192C7D;
  --dda-secondary-24:  #1E3181;
  --dda-secondary-25:  #213484;
  --dda-secondary-30:  #2E4090;
  --dda-secondary-35:  #3B4C9C;
  --dda-secondary-40:  #4758A9;
  --dda-secondary-50:  #6071C4;
  --dda-secondary-60:  #7A8BE0;
  --dda-secondary-70:  #95A6FD;
  --dda-secondary-80:  #B9C3FF;
  --dda-secondary-87:  #D2D8FF;
  --dda-secondary-90:  #DDE1FF;
  --dda-secondary-92:  #E5E6FF;
  --dda-secondary-94:  #ECECFF;
  --dda-secondary-95:  #F0EFFF;
  --dda-secondary-96:  #F3F2FF;
  --dda-secondary-98:  #FBF8FF;
  --dda-secondary-99:  #FEFBFF;
  --dda-secondary-100: #FFFFFF;

  /* ── DDS Neutral Palette ─────────────────────────────────────────────── */
  --dda-neutral-0:   #000000;
  --dda-neutral-10:  #1A1C1E;
  --dda-neutral-17:  #2B2D2F;
  --dda-neutral-20:  #2E3032;
  --dda-neutral-22:  #323436;
  --dda-neutral-24:  #36383A;
  --dda-neutral-30:  #444749;
  --dda-neutral-40:  #5C5F61;
  --dda-neutral-50:  #74777A;
  --dda-neutral-60:  #8E9194;
  --dda-neutral-70:  #A9ACAF;
  --dda-neutral-80:  #C4C7CA;
  --dda-neutral-87:  #D6D9DC;
  --dda-neutral-90:  #E1E3E6;
  --dda-neutral-92:  #E7E9EC;
  --dda-neutral-94:  #EDF0F2;
  --dda-neutral-95:  #F0F2F5;
  --dda-neutral-96:  #F3F5F7;
  --dda-neutral-98:  #F8FAFB;
  --dda-neutral-99:  #FBFDFE;
  --dda-neutral-100: #FFFFFF;

  /* ── DDS Error / Warning / Success / Info ────────────────────────────── */
  --dda-error-40:    #BA1A1A;
  --dda-error-90:    #FFDAD6;
  --dda-warning-40:  #7D5700;
  --dda-warning-90:  #FFDEA8;
  --dda-success-40:  #006E2C;
  --dda-success-90:  #98F5B4;
  --dda-info-40:     #00639B;
  --dda-info-90:     #C9E6FF;

  /* ── MBRSC Brand Gold (brand extension — not in DDS base) ────────────── */
  --dda-gold-40:     #C9A84C;
  --dda-gold-90:     #FFF0C8;


  /* =========================================================================
     2. SEMANTIC COLOR TOKENS — Light Mode (Default)
        Maps DDS tonal palette to role-based tokens
     ========================================================================= */

  /* Surface */
  --mbrsc-color-background:        var(--dda-neutral-99);
  --mbrsc-color-surface:           var(--dda-neutral-100);
  --mbrsc-color-surface-variant:   var(--dda-neutral-95);
  --mbrsc-color-surface-container: var(--dda-neutral-94);

  /* Primary */
  --mbrsc-color-primary:           var(--dda-primary-30);
  --mbrsc-color-primary-hover:     var(--dda-primary-20);
  --mbrsc-color-primary-active:    var(--dda-primary-10);
  --mbrsc-color-on-primary:        var(--dda-primary-100);
  --mbrsc-color-primary-container: var(--dda-primary-90);
  --mbrsc-color-on-primary-container: var(--dda-primary-10);

  /* Secondary */
  --mbrsc-color-secondary:         var(--dda-secondary-40);
  --mbrsc-color-secondary-hover:   var(--dda-secondary-30);
  --mbrsc-color-on-secondary:      var(--dda-secondary-100);
  --mbrsc-color-secondary-container: var(--dda-secondary-90);

  /* Text */
  --mbrsc-color-text-primary:      var(--dda-neutral-10);
  --mbrsc-color-text-secondary:    var(--dda-neutral-40);
  --mbrsc-color-text-disabled:     var(--dda-neutral-60);
  --mbrsc-color-text-inverse:      var(--dda-neutral-100);
  --mbrsc-color-text-on-primary:   var(--dda-primary-100);

  /* Border / Outline */
  --mbrsc-color-outline:           var(--dda-neutral-50);
  --mbrsc-color-outline-variant:   var(--dda-neutral-80);
  --mbrsc-color-divider:           var(--dda-neutral-90);

  /* Status */
  --mbrsc-color-error:             var(--dda-error-40);
  --mbrsc-color-error-container:   var(--dda-error-90);
  --mbrsc-color-warning:           var(--dda-warning-40);
  --mbrsc-color-warning-container: var(--dda-warning-90);
  --mbrsc-color-success:           var(--dda-success-40);
  --mbrsc-color-success-container: var(--dda-success-90);
  --mbrsc-color-info:              var(--dda-info-40);
  --mbrsc-color-info-container:    var(--dda-info-90);

  /* Brand accents */
  --mbrsc-color-gold:              var(--dda-gold-40);
  --mbrsc-color-gold-container:    var(--dda-gold-90);

  /* Legacy aliases — keep for backward compat with existing templates */
  --mbrsc-color-white:             var(--dda-neutral-100);
  --mbrsc-color-black:             var(--dda-neutral-0);
  --mbrsc-color-gray-50:           var(--dda-neutral-98);
  --mbrsc-color-gray-100:          var(--dda-neutral-95);
  --mbrsc-color-gray-200:          var(--dda-neutral-92);
  --mbrsc-color-gray-300:          var(--dda-neutral-90);
  --mbrsc-color-gray-400:          var(--dda-neutral-80);
  --mbrsc-color-gray-500:          var(--dda-neutral-60);
  --mbrsc-color-gray-600:          var(--dda-neutral-50);
  --mbrsc-color-gray-700:          var(--dda-neutral-40);
  --mbrsc-color-gray-800:          var(--dda-neutral-30);
  --mbrsc-color-gray-900:          var(--dda-neutral-20);


  /* =========================================================================
     3. DDS TYPOGRAPHY SCALE — Minor Third (1.2)
        Source: https://designsystem.dubai.ae/foundations/typography.md
        Two scales: Default (< 1024px) and Large (>= 1024px)
     ========================================================================= */

  /* ── Dubai Font ──────────────────────────────────────────────────────── */
  --mbrsc-font-en:      "Dubai", "Segoe UI", Arial, sans-serif;
  --mbrsc-font-ar:      "Dubai", "Segoe UI", Arial, sans-serif;
  --mbrsc-font-mono:    "Courier New", Courier, monospace;

  /* ── Default Scale (< 1024px) ────────────────────────────────────────── */
  --mbrsc-font-size-display: 3.556rem;   /* 56.9px ≈ DDS 68px default display */
  --mbrsc-font-size-h1:      3rem;       /* 48px — DDS default H1 */
  --mbrsc-font-size-h2:      2.5rem;     /* 40px — DDS default H2 */
  --mbrsc-font-size-h3:      2.056rem;   /* 32.9px — DDS default H3 */
  --mbrsc-font-size-h4:      1.722rem;   /* 27.5px — DDS default H4 */
  --mbrsc-font-size-h5:      1.438rem;   /* 23px — DDS default H5 */
  --mbrsc-font-size-h6:      1.2rem;     /* 19.2px — DDS default H6 */
  --mbrsc-font-size-body:    1rem;       /* 16px — DDS default body */
  --mbrsc-font-size-caption: 0.875rem;   /* 14px — DDS default caption */
  --mbrsc-font-size-small:   0.75rem;    /* 12px — DDS default small */

  /* ── Line Heights (Default) ──────────────────────────────────────────── */
  --mbrsc-line-height-display: 80px;
  --mbrsc-line-height-h1:      56px;
  --mbrsc-line-height-h2:      48px;
  --mbrsc-line-height-h3:      40px;
  --mbrsc-line-height-h4:      32px;
  --mbrsc-line-height-h5:      28px;
  --mbrsc-line-height-h6:      28px;
  --mbrsc-line-height-body:    24px;
  --mbrsc-line-height-caption: 20px;
  --mbrsc-line-height-small:   16px;

  /* ── Letter Spacing ──────────────────────────────────────────────────── */
  --mbrsc-letter-spacing-display: -0.01em;
  --mbrsc-letter-spacing-h1:      -0.005em;
  --mbrsc-letter-spacing-h2:      -0.005em;
  --mbrsc-letter-spacing-h3:      0em;
  --mbrsc-letter-spacing-h4:      0em;
  --mbrsc-letter-spacing-body:    0em;
  --mbrsc-letter-spacing-caption: 0.01em;
  --mbrsc-letter-spacing-small:   0.02em;

  /* ── Font Weights ────────────────────────────────────────────────────── */
  --mbrsc-font-weight-light:    300;
  --mbrsc-font-weight-regular:  400;
  --mbrsc-font-weight-medium:   500;
  --mbrsc-font-weight-semibold: 600;
  --mbrsc-font-weight-bold:     700;

  /* Legacy size aliases */
  --mbrsc-font-size-xs:   var(--mbrsc-font-size-small);
  --mbrsc-font-size-sm:   var(--mbrsc-font-size-caption);
  --mbrsc-font-size-base: var(--mbrsc-font-size-body);
  --mbrsc-font-size-lg:   var(--mbrsc-font-size-h6);
  --mbrsc-font-size-xl:   var(--mbrsc-font-size-h5);
  --mbrsc-font-size-2xl:  var(--mbrsc-font-size-h4);
  --mbrsc-font-size-3xl:  var(--mbrsc-font-size-h3);
  --mbrsc-font-size-4xl:  var(--mbrsc-font-size-h2);
  --mbrsc-font-size-5xl:  var(--mbrsc-font-size-h1);


  /* =========================================================================
     4. DDS LAYOUT — Breakpoints, Container, Gutter, Margins
        Source: https://designsystem.dubai.ae/foundations/layout-and-breakpoints.md
     ========================================================================= */

  /* Breakpoints (reference only — used in media queries below) */
  --mbrsc-bp-sm:  640px;
  --mbrsc-bp-md:  768px;
  --mbrsc-bp-lg:  1024px;
  --mbrsc-bp-xl:  1280px;
  --mbrsc-bp-2xl: 1536px;

  /* Container max widths per DDS spec */
  --mbrsc-container-sm:  100%;      /* + 16px padding */
  --mbrsc-container-md:  720px;
  --mbrsc-container-lg:  960px;
  --mbrsc-container-xl:  1140px;
  --mbrsc-container-2xl: 1280px;
  --mbrsc-container-max: 1280px;    /* default max */

  /* Gutter — DDS spec: 16px */
  --mbrsc-grid-gap:      16px;
  --mbrsc-grid-gap-sm:   8px;
  --mbrsc-grid-gap-lg:   24px;

  /* Outer margins — DDS spec: 112px on desktop */
  --mbrsc-outer-margin:       16px;   /* mobile default */
  --mbrsc-outer-margin-lg:    112px;  /* desktop per DDS spec */

  /* Section padding */
  --mbrsc-section-padding:    3rem;   /* mobile */
  --mbrsc-section-padding-lg: 5rem;   /* desktop */


  /* =========================================================================
     5. DDS SPACING SCALE
        Source: https://designsystem.dubai.ae/foundations/layout-and-breakpoints.md
        Rule: 2px increments up to 1rem (16px), then 4px increments up to 48px
     ========================================================================= */

  --mbrsc-space-1:  2px;
  --mbrsc-space-2:  4px;
  --mbrsc-space-3:  6px;
  --mbrsc-space-4:  8px;
  --mbrsc-space-5:  10px;
  --mbrsc-space-6:  12px;
  --mbrsc-space-7:  14px;
  --mbrsc-space-8:  16px;   /* 1rem — pivot point */
  --mbrsc-space-9:  20px;   /* +4px increments from here */
  --mbrsc-space-10: 24px;
  --mbrsc-space-11: 28px;
  --mbrsc-space-12: 32px;
  --mbrsc-space-13: 36px;
  --mbrsc-space-14: 40px;
  --mbrsc-space-15: 44px;
  --mbrsc-space-16: 48px;   /* max per DDS spec */


  /* =========================================================================
     6. ICON SIZES — DDS spec
        Source: https://designsystem.dubai.ae/foundations/icons-and-visuals.md
        Small: 16px | Medium: 24px | Large: 32px
     ========================================================================= */

  --mbrsc-icon-sm: 16px;
  --mbrsc-icon-md: 24px;
  --mbrsc-icon-lg: 32px;


  /* =========================================================================
     7. COMPONENT TOKENS — Derived from semantic tokens
     ========================================================================= */

  /* Cards */
  --mbrsc-card-bg:            var(--mbrsc-color-surface);
  --mbrsc-card-border:        var(--mbrsc-color-outline-variant);
  --mbrsc-card-radius:        12px;
  --mbrsc-card-shadow:        0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
  --mbrsc-card-shadow-hover:  0 8px 24px rgba(0,0,0,.12), 0 4px 8px rgba(0,0,0,.08);

  /* Buttons */
  --mbrsc-btn-radius:         8px;
  --mbrsc-btn-height:         44px;
  --mbrsc-btn-height-sm:      36px;
  --mbrsc-btn-height-lg:      52px;
  --mbrsc-btn-padding-x:      var(--mbrsc-space-10);
  --mbrsc-btn-font-weight:    var(--mbrsc-font-weight-medium);

  /* Inputs */
  --mbrsc-input-height:       44px;
  --mbrsc-input-radius:       8px;
  --mbrsc-input-border:       var(--mbrsc-color-outline);
  --mbrsc-input-bg:           var(--mbrsc-color-surface);
  --mbrsc-input-focus-border: var(--mbrsc-color-primary);

  /* Header */
  --mbrsc-header-height:      72px;
  --mbrsc-header-height-sm:   60px;
  --mbrsc-header-bg:          var(--mbrsc-color-surface);
  --mbrsc-header-border:      var(--mbrsc-color-divider);
  --mbrsc-header-shadow:      0 1px 4px rgba(0,0,0,.08);

  /* Radius scale */
  --mbrsc-radius-sm:   4px;
  --mbrsc-radius-md:   8px;
  --mbrsc-radius-lg:   12px;
  --mbrsc-radius-xl:   16px;
  --mbrsc-radius-2xl:  24px;
  --mbrsc-radius-full: 9999px;

  /* Shadows */
  --mbrsc-shadow-sm:         0 1px 2px rgba(0,0,0,.05);
  --mbrsc-shadow-card:       var(--mbrsc-card-shadow);
  --mbrsc-shadow-card-hover: var(--mbrsc-card-shadow-hover);
  --mbrsc-shadow-overlay:    0 20px 60px rgba(0,0,0,.2);

  /* Transitions */
  --mbrsc-transition-fast:   150ms ease;
  --mbrsc-transition-base:   250ms ease;
  --mbrsc-transition-slow:   400ms ease;

  /* Z-index scale */
  --mbrsc-z-dropdown:  100;
  --mbrsc-z-sticky:    200;
  --mbrsc-z-overlay:   300;
  --mbrsc-z-modal:     400;
  --mbrsc-z-toast:     500;

} /* end :root */


/* =============================================================================
   8. LARGE DESKTOP TYPOGRAPHY — >= 1024px
      DDS spec: font switches from Default to Large at >= 1024px
   ============================================================================= */

@media (min-width: 1024px) {
  :root {
    --mbrsc-font-size-display: 4.75rem;    /* 76px — DDS Large display */
    --mbrsc-font-size-h1:      3.375rem;   /* 54px — DDS Large H1 */
    --mbrsc-font-size-h2:      2.8125rem;  /* 45px — DDS Large H2 */
    --mbrsc-font-size-h3:      2.3125rem;  /* 37px — DDS Large H3 */
    --mbrsc-font-size-h4:      2rem;       /* 32px — DDS Large H4 */
    --mbrsc-font-size-h5:      1.625rem;   /* 26px — DDS Large H5 */
    --mbrsc-font-size-h6:      1.375rem;   /* 22px — DDS Large H6 */
    --mbrsc-font-size-body:    1.125rem;   /* 18px — DDS Large body */
    --mbrsc-font-size-caption: 1rem;       /* 16px — DDS Large caption */
    --mbrsc-font-size-small:   0.875rem;   /* 14px — DDS Large small */

    /* Line heights — Large */
    --mbrsc-line-height-display: 64px;
    --mbrsc-line-height-h1:      56px;
    --mbrsc-line-height-h2:      44px;
    --mbrsc-line-height-h3:      36px;
    --mbrsc-line-height-h4:      32px;
    --mbrsc-line-height-h5:      28px;
    --mbrsc-line-height-h6:      28px;
    --mbrsc-line-height-body:    28px;
    --mbrsc-line-height-caption: 24px;
    --mbrsc-line-height-small:   20px;

    /* Letter spacing — Large */
    --mbrsc-letter-spacing-display: -0.005em;
    --mbrsc-letter-spacing-h1:      -0.005em;
    --mbrsc-letter-spacing-h2:      0em;

    /* Layout — outer margin switches to 112px at desktop */
    --mbrsc-outer-margin:    var(--mbrsc-outer-margin-lg);
    --mbrsc-section-padding: var(--mbrsc-section-padding-lg);
  }
}


/* =============================================================================
   9. DARK MODE — data-theme="dark"
      Source: https://designsystem.dubai.ae/developers/light-mode-dark-mode.md
      Enable: <body data-theme="dark"> or <html data-theme="dark">
   ============================================================================= */

[data-theme="dark"] {

  /* Surface */
  --mbrsc-color-background:        var(--dda-neutral-10);
  --mbrsc-color-surface:           var(--dda-neutral-17);
  --mbrsc-color-surface-variant:   var(--dda-neutral-22);
  --mbrsc-color-surface-container: var(--dda-neutral-24);

  /* Primary */
  --mbrsc-color-primary:              var(--dda-primary-80);
  --mbrsc-color-primary-hover:        var(--dda-primary-70);
  --mbrsc-color-primary-active:       var(--dda-primary-60);
  --mbrsc-color-on-primary:           var(--dda-primary-20);
  --mbrsc-color-primary-container:    var(--dda-primary-30);
  --mbrsc-color-on-primary-container: var(--dda-primary-90);

  /* Secondary */
  --mbrsc-color-secondary:            var(--dda-secondary-80);
  --mbrsc-color-secondary-hover:      var(--dda-secondary-70);
  --mbrsc-color-on-secondary:         var(--dda-secondary-20);
  --mbrsc-color-secondary-container:  var(--dda-secondary-30);

  /* Text */
  --mbrsc-color-text-primary:   var(--dda-neutral-90);
  --mbrsc-color-text-secondary: var(--dda-neutral-70);
  --mbrsc-color-text-disabled:  var(--dda-neutral-50);
  --mbrsc-color-text-inverse:   var(--dda-neutral-10);
  --mbrsc-color-text-on-primary: var(--dda-primary-20);

  /* Border */
  --mbrsc-color-outline:         var(--dda-neutral-60);
  --mbrsc-color-outline-variant: var(--dda-neutral-30);
  --mbrsc-color-divider:         var(--dda-neutral-24);

  /* Status */
  --mbrsc-color-error:             #FFB4AB;
  --mbrsc-color-error-container:   #93000A;
  --mbrsc-color-warning:           #FFB951;
  --mbrsc-color-warning-container: #5F4200;
  --mbrsc-color-success:           #7ADA96;
  --mbrsc-color-success-container: #005320;
  --mbrsc-color-info:              #90CAFF;
  --mbrsc-color-info-container:    #004A77;

  /* Brand gold — dark mode */
  --mbrsc-color-gold:           #F0C96A;
  --mbrsc-color-gold-container: #4A3500;

  /* Legacy aliases — dark */
  --mbrsc-color-white:    var(--dda-neutral-90);
  --mbrsc-color-black:    var(--dda-neutral-100);
  --mbrsc-color-gray-50:  var(--dda-neutral-22);
  --mbrsc-color-gray-100: var(--dda-neutral-24);
  --mbrsc-color-gray-200: var(--dda-neutral-30);
  --mbrsc-color-gray-300: var(--dda-neutral-40);
  --mbrsc-color-gray-400: var(--dda-neutral-50);
  --mbrsc-color-gray-500: var(--dda-neutral-60);
  --mbrsc-color-gray-600: var(--dda-neutral-70);
  --mbrsc-color-gray-700: var(--dda-neutral-80);
  --mbrsc-color-gray-800: var(--dda-neutral-87);
  --mbrsc-color-gray-900: var(--dda-neutral-90);

  /* Component tokens — dark */
  --mbrsc-card-bg:      var(--mbrsc-color-surface);
  --mbrsc-card-border:  var(--mbrsc-color-outline-variant);
  --mbrsc-card-shadow:  0 1px 3px rgba(0,0,0,.3), 0 1px 2px rgba(0,0,0,.2);
  --mbrsc-header-bg:    var(--mbrsc-color-surface);
  --mbrsc-header-border: var(--mbrsc-color-divider);
  --mbrsc-input-bg:     var(--mbrsc-color-surface-variant);
  --mbrsc-input-border: var(--mbrsc-color-outline);
}


/* =============================================================================
   10. BASE STYLES — Apply DDS tokens to HTML elements
   ============================================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin:     0;
  padding:    0;
}

html {
  font-size:                16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior:          smooth;
}

body {
  /* DDS Font Family spec: body { font-family: "your_font_family" } */
  font-family:      var(--mbrsc-font-en);
  font-size:        var(--mbrsc-font-size-body);
  line-height:      var(--mbrsc-line-height-body);
  color:            var(--mbrsc-color-text-primary);
  background-color: var(--mbrsc-color-background);
  -webkit-font-smoothing:  antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Arabic font switch */
[dir="rtl"] body,
body[dir="rtl"],
[lang="ar"] body {
  font-family: var(--mbrsc-font-ar);
}

/* Headings */
h1 {
  font-size:      var(--mbrsc-font-size-h1);
  line-height:    var(--mbrsc-line-height-h1);
  letter-spacing: var(--mbrsc-letter-spacing-h1);
  font-weight:    var(--mbrsc-font-weight-bold);
  color:          var(--mbrsc-color-text-primary);
}
h2 {
  font-size:      var(--mbrsc-font-size-h2);
  line-height:    var(--mbrsc-line-height-h2);
  letter-spacing: var(--mbrsc-letter-spacing-h2);
  font-weight:    var(--mbrsc-font-weight-bold);
  color:          var(--mbrsc-color-text-primary);
}
h3 {
  font-size:      var(--mbrsc-font-size-h3);
  line-height:    var(--mbrsc-line-height-h3);
  font-weight:    var(--mbrsc-font-weight-semibold);
  color:          var(--mbrsc-color-text-primary);
}
h4 {
  font-size:      var(--mbrsc-font-size-h4);
  line-height:    var(--mbrsc-line-height-h4);
  font-weight:    var(--mbrsc-font-weight-semibold);
  color:          var(--mbrsc-color-text-primary);
}
h5 {
  font-size:      var(--mbrsc-font-size-h5);
  line-height:    var(--mbrsc-line-height-h5);
  font-weight:    var(--mbrsc-font-weight-medium);
  color:          var(--mbrsc-color-text-primary);
}
h6 {
  font-size:      var(--mbrsc-font-size-h6);
  line-height:    var(--mbrsc-line-height-h6);
  font-weight:    var(--mbrsc-font-weight-medium);
  color:          var(--mbrsc-color-text-primary);
}

p {
  font-size:   var(--mbrsc-font-size-body);
  line-height: var(--mbrsc-line-height-body);
  color:       var(--mbrsc-color-text-primary);
}

small, .mbrsc-text-small {
  font-size:      var(--mbrsc-font-size-small);
  line-height:    var(--mbrsc-line-height-small);
  letter-spacing: var(--mbrsc-letter-spacing-small);
}

.mbrsc-caption {
  font-size:      var(--mbrsc-font-size-caption);
  line-height:    var(--mbrsc-line-height-caption);
  letter-spacing: var(--mbrsc-letter-spacing-caption);
}

a {
  color:           var(--mbrsc-color-primary);
  text-decoration: none;
  transition:      color var(--mbrsc-transition-fast);
}
a:hover  { color: var(--mbrsc-color-primary-hover); }
a:focus-visible {
  outline:        2px solid var(--mbrsc-color-primary);
  outline-offset: 2px;
  border-radius:  var(--mbrsc-radius-sm);
}


/* =============================================================================
   11. DDS CONTAINER — Responsive widths per spec
   ============================================================================= */

.mbrsc-container {
  width:      100%;
  margin-inline: auto;
  padding-inline: var(--mbrsc-outer-margin);
}

/* sm: 100% + 16px padding */
@media (min-width: 640px) {
  .mbrsc-container { max-width: var(--mbrsc-container-sm); }
}
/* md: max 720px */
@media (min-width: 768px) {
  .mbrsc-container { max-width: var(--mbrsc-container-md); }
}
/* lg: max 960px */
@media (min-width: 1024px) {
  .mbrsc-container { max-width: var(--mbrsc-container-lg); }
}
/* xl: max 1140px */
@media (min-width: 1280px) {
  .mbrsc-container { max-width: var(--mbrsc-container-xl); }
}
/* 2xl: max 1280px */
@media (min-width: 1536px) {
  .mbrsc-container { max-width: var(--mbrsc-container-2xl); }
}

/* Full-width container variant */
.mbrsc-container--fluid {
  width:          100%;
  padding-inline: var(--mbrsc-outer-margin);
}


/* =============================================================================
   12. DDS ICON SIZES
       Source: https://designsystem.dubai.ae/foundations/icons-and-visuals.md
   ============================================================================= */

.material-icons,
.material-icons-outlined,
.material-icons-round {
  font-size:          var(--mbrsc-icon-md);   /* 24px default */
  width:              var(--mbrsc-icon-md);
  height:             var(--mbrsc-icon-md);
  vertical-align:     middle;
  user-select:        none;
}

.material-icons--sm { font-size: var(--mbrsc-icon-sm); width: var(--mbrsc-icon-sm); height: var(--mbrsc-icon-sm); }
.material-icons--lg { font-size: var(--mbrsc-icon-lg); width: var(--mbrsc-icon-lg); height: var(--mbrsc-icon-lg); }

/* Decorative icons — already aria-hidden="true" in markup */
[aria-hidden="true"].material-icons { pointer-events: none; }