/**
 * TrendMix Design System
 * نظام التصميم الأساسي لتريند 360
 *
 * @package TrendMix
 * @version 2.2.0
 */

/* ==================================================
   DESIGN TOKENS
   ================================================== */

/* ==================================================
   SELF-HOSTED FONTS

   These were previously loaded from framerusercontent.com, a Figma
   CDN outside our control. That added a third-party dependency and
   an extra DNS + TLS handshake on the critical path before any
   Arabic text could paint. The woff2 files now ship with the theme
   under assets/fonts/.

   Weights 600 and 800 are used in the CSS but were not declared
   before, so the browser had to snap or synthesise them. They are
   mapped onto the real 700 and 900 files here rather than being
   left to synthesis, which matters for Arabic.
   ================================================== */

@font-face {
  font-family: 'Thmanyah Sans';
  src: url('../fonts/thmanyah-sans-400.woff2') format('woff2');
  font-display: swap;
  font-style: normal;
  font-weight: 400;
}

@font-face {
  font-family: 'Thmanyah Sans';
  src: url('../fonts/thmanyah-sans-500.woff2') format('woff2');
  font-display: swap;
  font-style: normal;
  font-weight: 500;
}

@font-face {
  font-family: 'Thmanyah Sans';
  src: url('../fonts/thmanyah-sans-700.woff2') format('woff2');
  font-display: swap;
  font-style: normal;
  font-weight: 700;
}

@font-face {
  font-family: 'Thmanyah Sans';
  src: url('../fonts/thmanyah-sans-900.woff2') format('woff2');
  font-display: swap;
  font-style: normal;
  font-weight: 900;
}

@font-face {
  font-family: 'Thmanyah Serif Display';
  src: url('../fonts/thmanyah-serif-400.woff2') format('woff2');
  font-display: swap;
  font-style: normal;
  font-weight: 400;
}

@font-face {
  font-family: 'Thmanyah Serif Display';
  src: url('../fonts/thmanyah-serif-700.woff2') format('woff2');
  font-display: swap;
  font-style: normal;
  font-weight: 700;
}

@font-face {
  font-family: 'Thmanyah Serif Display';
  src: url('../fonts/thmanyah-serif-900.woff2') format('woff2');
  font-display: swap;
  font-style: normal;
  font-weight: 900;
}

/*
 * Arabic fallback.
 *
 * Thmanyah is the typeface for this site and stays first in every
 * stack. It does not, however, cover every Arabic glyph — most
 * visibly the currency label "ر.س", which was being substituted
 * with a placeholder box. Noto Sans Arabic is self-hosted purely
 * as a last-resort patch: it only supplies glyphs Thmanyah lacks,
 * so headings and body copy keep their Thmanyah character.
 *
 * Declared across the full weight range because it is a variable
 * font; a single file covers every weight.
 */
@font-face {
  font-family: 'Noto Sans Arabic';
  src: url('../fonts/noto-sans-arabic.woff2') format('woff2');
  font-display: swap;
  font-style: normal;
  font-weight: 100 900;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891,
    U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41,
    U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

:root {

  /* ==================================================
     ألوان العلامة التجارية
     ================================================== */

  --color-primary:       var(--ui-primary, #0fa96b);           /* Blue primary */
  --color-primary-light: var(--ui-primary-light, #22c98a);    /* Blue light */
  --color-primary-dark:  var(--ui-primary-dark, #0a6b4a);     /* Blue dark */
  --color-primary-rgb:   47, 90, 174;

  --color-accent:        var(--ui-accent, #2fbfa0);            /* Orange accent */
  --color-accent-light:  var(--ui-accent-light, #7fe3cd);     /* Orange light */
  --color-accent-dark:   var(--ui-accent-dark, #0d7a8a);      /* Orange dark */
  --color-accent-rgb:    243, 156, 18;

  /* درجات اللون الأساسي */
  --color-primary-50:    var(--ui-primary-50, #e9f8f1);
  --color-primary-100:   var(--ui-primary-100, #cdf0df);
  --color-primary-200:   var(--ui-primary-200, #a3e3c4);
  --color-primary-300:   var(--ui-primary-300, #a3e3c4);

  --color-primary-700:   var(--ui-primary-700, #057a4c);
  --color-primary-800:   var(--ui-primary-800, #04603c);
  --color-primary-900:   var(--ui-primary-900, #034d31);

  /* درجات الذهبي / البرتقالي */
  --color-accent-50:     var(--ui-accent-50, #e6f7f4);
  --color-accent-100:    var(--ui-accent-100, #c4ece5);
  --color-accent-200:    var(--ui-accent-200, #9adfd3);
  --color-accent-300:    var(--ui-accent-300, #9adfd3);

  --color-accent-700:    var(--ui-accent-700, #0a5f6b);
  --color-accent-800:    var(--ui-accent-800, #084b55);
  --color-accent-900:    var(--ui-accent-900, #063b43);


  /* ==================================================
     الألوان المحايدة
     ================================================== */

  --color-neutral-950:   var(--ui-neutral-950, #0f172a);
  --color-neutral-900:   var(--ui-neutral-900, #1e293b);
  --color-neutral-800:   var(--ui-neutral-800, #334155);
  --color-neutral-700:   var(--ui-neutral-700, #475569);
  --color-neutral-600:   var(--ui-neutral-600, #64748b);
  --color-neutral-500:   var(--ui-neutral-500, #8fa39d);
  --color-neutral-400:   var(--ui-neutral-400, #dbe4e0);
  --color-neutral-300:   var(--ui-neutral-300, #e4ece9);
  --color-neutral-200:   var(--ui-neutral-200, #f1f5f9);
  --color-neutral-100:   var(--ui-neutral-100, #f8fafc);
  --color-neutral-50:    var(--ui-neutral-50, #ffffff);

  --color-white:         #FFFFFF;
  --color-black:         #000000;


  /* ==================================================
     ألوان الحالة
     ================================================== */

  --color-success:        #16804B;
  --color-success-light:  #22A661;
  --color-success-bg:     #ECFDF3;
  --color-success-border: #B7E4C7;

  --color-warning:        #0d7a8a;
  --color-warning-light:  #0d7a8a;
  --color-warning-bg:     #e6f7f4;
  --color-warning-border: #d9fff0;

  --color-error:          #C0392B;
  --color-error-light:    #D9534F;
  --color-error-bg:       #FEF2F2;
  --color-error-border:   #F1B5B0;

  --color-info:           var(--color-primary);
  --color-info-bg:        var(--color-primary-50);
  --color-info-border:    var(--color-primary-200);


  /* ==================================================
     الخلفيات والأسطح - محدثة لتتناسب مع العلامة التجارية
     ================================================== */

  --color-background:     var(--ui-neutral-100, #f8fafc);

  --color-surface:        var(--ui-surface-primary, #ffffff);
  --color-surface-raised: var(--ui-surface-primary, #ffffff);
  --color-surface-muted:  var(--ui-surface-secondary, #f8fafc);
  --color-surface-hover:  var(--ui-surface-tertiary, #f1f5f9);
  --color-surface-active: var(--ui-surface-quaternary, #e4ece9);

  --color-header:         var(--ui-surface-primary, #ffffff);

  --color-overlay:
    rgba(18, 45, 38, 0.55);

  /* Glassmorphism */
  --glass-bg: rgba(255, 255, 255, 0.85);
  --glass-border: rgba(15, 169, 107, 0.12);
  --glass-blur: blur(12px);


  /* ==================================================
     الحدود
     ================================================== */

  --color-border:        var(--ui-border-soft, rgba(15, 169, 107, 0.08));
  --color-border-light:  var(--ui-border-medium, rgba(15, 169, 107, 0.12));
  --color-border-strong: var(--ui-border-strong, rgba(15, 169, 107, 0.22));
  --color-border-focus:  var(--color-primary);


  /* ==================================================
     النصوص
     ================================================== */

  --color-text-primary:   var(--ui-text-primary, #1e293b);
  --color-text-secondary: var(--ui-text-secondary, #475569);
  --color-text-muted:     var(--ui-text-muted, #64748b);
  --color-text-subtle:    var(--ui-text-subtle, #8fa39d);
  --color-text-disabled:  #dbe4e0;
  --color-text-inverse:   var(--ui-neutral-100, #ffffff);


  /* ==================================================
     الروابط
     ================================================== */

  --color-link:       var(--color-primary);
  --color-link-hover: var(--color-primary-dark);


  /* ==================================================
     مساعدات العلامة التجارية
     ================================================== */

  --color-primary-soft:
    rgba(var(--color-primary-rgb), 0.06);

  --color-primary-hover:
    rgba(var(--color-primary-rgb), 0.10);

  --color-primary-active:
    rgba(var(--color-primary-rgb), 0.14);

  --color-accent-soft:
    rgba(var(--color-accent-rgb), 0.10);

  --color-accent-faint:
    rgba(var(--color-accent-rgb), 0.06);

  /* Gradients */
  --gradient-primary: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 55%, var(--color-primary-light) 100%);
  --gradient-accent: linear-gradient(135deg, var(--color-accent-dark) 0%, var(--color-accent) 45%, var(--color-accent-light) 100%);
  --gradient-dark: linear-gradient(135deg, var(--color-neutral-900) 0%, var(--color-neutral-800) 100%);
  --gradient-premium-hero: var(--gradient-primary);


  /* ==================================================
     الخطوط
     ================================================== */

  --font-sans:
    'Thmanyah Sans',
    'Noto Sans Arabic',
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    sans-serif;

  --font-arabic:
    'Thmanyah Sans',
    'Noto Sans Arabic',
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    sans-serif;

  --font-serif:
    'Thmanyah Sans',
    'Thmanyah Serif Display',
    'Noto Sans Arabic',
    'Times New Roman',
    serif;

  /*
   * Headings use the same Thmanyah Sans as body copy, weighted up.
   * The serif display cut reads as a different typeface at heading
   * sizes, so the site read as two unrelated fonts rather than one.
   */
  --font-display:
    'Thmanyah Sans',
    'Noto Sans Arabic',
    serif;

  --font-mono:
    'SFMono-Regular',
    'SF Mono',
    'Fira Code',
    'Cascadia Code',
    Consolas,
    monospace;


  /* ==================================================
     أحجام الخطوط
     ================================================== */

  --text-xs:    0.75rem;
  --text-sm:    0.875rem;
  --text-base:  1rem;
  --text-lg:    1.125rem;
  --text-xl:    1.25rem;
  --text-2xl:   1.5rem;
  --text-3xl:   1.875rem;
  --text-4xl:   2.25rem;
  --text-5xl:   3rem;
  --text-6xl:   3.75rem;
  --text-7xl:   4.5rem;


  /* ==================================================
     ارتفاع السطر
     ================================================== */

  --leading-none:    1;
  --leading-tight:   1.2;
  --leading-snug:    1.35;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;
  --leading-loose:   1.8;


  /* ==================================================
     تباعد الحروف
     ================================================== */

  --tracking-tighter: -0.035em;
  --tracking-tight:   -0.02em;
  --tracking-normal:   0;
  --tracking-wide:     0.02em;
  --tracking-wider:    0.05em;
  --tracking-widest:   0.10em;


  /* ==================================================
     أوزان الخطوط
     ================================================== */

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;


  /* ==================================================
     المسافات
     ================================================== */

  --space-px: 1px;

  --space-0:  0;
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-7:  1.75rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-14: 3.5rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-28: 7rem;
  --space-32: 8rem;
  --space-40: 10rem;
  --space-48: 12rem;


  /* ==================================================
     التخطيط
     ================================================== */

  --container-max:    1280px;
  --container-wide:   1440px;
  --container-narrow: 820px;

  --container-padding: 24px;

  --grid-gap:    24px;
  --grid-gap-lg: 32px;

  --section-padding-y:    80px;
  --section-padding-y-lg: 112px;

  --header-height:        72px;
  --header-height-mobile: 64px;


  /* ==================================================
     الزوايا
     ================================================== */

  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-base: 8px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   18px;
  --radius-2xl:  24px;
  --radius-full: 9999px;


  /* ==================================================
     الظلال - محدثة لتتناسب مع الألوان الجديدة
     ================================================== */

  --shadow-none: none;

  --shadow-xs:
    0 1px 2px rgba(18, 45, 38, 0.04);

  --shadow-sm:
    0 1px 3px rgba(18, 45, 38, 0.05),
    0 1px 2px rgba(18, 45, 38, 0.03);

  --shadow-base:
    0 4px 10px rgba(18, 45, 38, 0.05),
    0 2px 4px rgba(18, 45, 38, 0.03);

  --shadow-md:
    0 8px 20px rgba(18, 45, 38, 0.06),
    0 3px 8px rgba(18, 45, 38, 0.03);

  --shadow-lg:
    0 16px 32px rgba(18, 45, 38, 0.07),
    0 6px 14px rgba(18, 45, 38, 0.035);

  --shadow-xl:
    0 24px 48px rgba(18, 45, 38, 0.09),
    0 10px 20px rgba(18, 45, 38, 0.04);


  /* ==================================================
     الحركة
     ================================================== */

  --transition-fast:
    150ms ease;

  --transition-base:
    220ms ease;

  --transition-slow:
    350ms ease;

  --transition-smooth:
    300ms cubic-bezier(0.4, 0, 0.2, 1);


  /* ==================================================
     التركيز
     ================================================== */

  --focus-ring:
    0 0 0 3px rgba(var(--color-primary-rgb), 0.18);

  --focus-ring-accent:
    0 0 0 3px rgba(var(--color-accent-rgb), 0.22);


  /* ==================================================
     عناصر التحكم
     ================================================== */

  --control-height-sm: 36px;
  --control-height:    42px;
  --control-height-lg: 48px;

  --button-padding-x: 18px;
  --button-radius:    var(--radius-base);


  /* ==================================================
     لوحة التحكم
     ================================================== */

  --dashboard-sidebar-width: 270px;
  --dashboard-content-gap:   32px;
  --dashboard-card-padding:  24px;
  --dashboard-section-gap:   40px;


  /* ==================================================
     الجداول
     ================================================== */

  --table-row-height:   64px;
  --table-cell-padding: 16px 20px;


  /* ==================================================
     الطبقات
     ================================================== */

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


  /* ==================================================
     التدرجات
     ملاحظة: تعريفات التدرجات الأساسية موجودة أعلاه
     (--gradient-primary / --gradient-accent / --gradient-dark)
     ================================================== */


  /* ==================================================
     الزجاج
     ================================================== */

  --glass-bg:           rgba(255, 255, 255, 0.92);
  --glass-bg-dark:      rgba(255, 255, 255, 0.98);
  --glass-border:       var(--color-border);
  --glass-border-dark:  var(--color-neutral-200);
  --glass-blur:         none;


  /* ==================================================
     نقاط التوقف
     ================================================== */

  --bp-sm:  640px;
  --bp-md:  768px;
  --bp-lg:  1024px;
  --bp-xl:  1280px;
  --bp-2xl: 1536px;
}


/* ==================================================
   RESET
   ================================================== */

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

html,
body {
  margin: 0;
  padding: 0;
}

body {
  min-height: 100vh;
}

img,
svg,
video,
canvas {
  display: block;
  max-width: 100%;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  border: 0;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}


/* ==================================================
   HTML
   ================================================== */

html {
  min-height: 100%;

  font-size: 16px;

  scroll-behavior: smooth;

  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}


/* ==================================================
   BODY
   ================================================== */

body {
  background: var(--color-background);
  color: var(--color-text-primary);

  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--fw-regular);
  line-height: var(--leading-normal);

  text-rendering: optimizeLegibility;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* ==================================================
   RTL
   ================================================== */

html[dir="rtl"],
body.rtl {
  direction: rtl;
  font-family: var(--font-arabic);
}

html[dir="rtl"] body {
  font-family: var(--font-arabic);
}

html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4,
html[dir="rtl"] h5,
html[dir="rtl"] h6 {
  letter-spacing: 0;
}


/* ==================================================
   العناوين
   ================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;

  color: var(--color-text-primary);

  font-weight: var(--fw-bold);
  line-height: var(--leading-tight);

  letter-spacing: var(--tracking-tight);
}

h1 {
  font-size: clamp(2.5rem, 5vw, var(--text-7xl));
}

h2 {
  font-size: clamp(2rem, 4vw, var(--text-5xl));
}

h3 {
  font-size: clamp(1.5rem, 3vw, var(--text-3xl));
}

h4 {
  font-size: var(--text-xl);
}


/* ==================================================
   النصوص
   ================================================== */

p {
  margin: 0;
}

strong,
b {
  font-weight: var(--fw-bold);
}


/* ==================================================
   الروابط
   ================================================== */

a {
  color: var(--color-link);

  text-decoration-thickness: 1px;
  text-underline-offset: 3px;

  transition:
    color var(--transition-fast),
    opacity var(--transition-fast);
}

a:hover {
  color: var(--color-link-hover);
}


/* ==================================================
   التحديد
   ================================================== */

::selection {
  background: var(--color-primary);
  color: var(--color-white);
}


/* ==================================================
   التركيز
   ================================================== */

:focus {
  outline: none;
}

:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}


/* ==================================================
   النماذج
   ================================================== */

input,
select,
textarea {
  width: 100%;

  min-height: var(--control-height);

  border: 1px solid var(--color-border);
  border-radius: var(--radius-base);

  background: var(--color-surface);
  color: var(--color-text-primary);

  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast),
    background-color var(--transition-fast);
}

textarea {
  min-height: 140px;
  resize: vertical;
}

input::placeholder,
textarea::placeholder {
  color: var(--color-text-subtle);
}

input:hover,
select:hover,
textarea:hover {
  border-color: var(--color-border-strong);
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--color-primary);

  box-shadow: var(--focus-ring);
}

input:disabled,
select:disabled,
textarea:disabled {
  background: var(--color-surface-muted);
  color: var(--color-text-disabled);

  cursor: not-allowed;
}


/* ==================================================
   الأزرار
   ================================================== */

button {
  cursor: pointer;
}

button:disabled,
button[disabled],
button[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.55;
}


/* ==================================================
   الجداول
   ================================================== */

table {
  width: 100%;
  border-collapse: collapse;
}


/* ==================================================
   القوائم
   ================================================== */

ul,
ol {
  margin: 0;
  padding: 0;
}


/* ==================================================
   الصور
   ================================================== */

img {
  height: auto;
}


/* ==================================================
   الحاويات
   ================================================== */

.container {
  width: min(
    100% - (var(--container-padding) * 2),
    var(--container-max)
  );

  margin-inline: auto;
}

.container--wide {
  width: min(
    100% - (var(--container-padding) * 2),
    var(--container-wide)
  );

  margin-inline: auto;
}

.container--narrow {
  width: min(
    100% - (var(--container-padding) * 2),
    var(--container-narrow)
  );

  margin-inline: auto;
}


/* ==================================================
   المساحات العامة للأقسام
   ================================================== */

.section-spacing {
  padding-block: var(--section-padding-y);
}

.section-spacing-lg {
  padding-block: var(--section-padding-y-lg);
}


/* ==================================================
   حالات عامة
   ================================================== */

.is-hidden {
  display: none !important;
}

[hidden] {
  display: none !important;
}


/* ==================================================
   إمكانية الوصول
   ================================================== */

@media (prefers-reduced-motion: reduce) {

  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}


/* ==================================================
   الشاشات المتوسطة
   ================================================== */

@media (max-width: 1024px) {

  :root {
    --section-padding-y: 64px;
    --section-padding-y-lg: 88px;

    --dashboard-content-gap: 24px;
  }

  .container,
  .container--wide,
  .container--narrow {
    width: min(
      100% - (var(--container-padding) * 2),
      var(--container-max)
    );
  }
}


/* ==================================================
   الأجهزة اللوحية
   ================================================== */

@media (max-width: 768px) {

  :root {
    --container-padding: 20px;

    --grid-gap: 16px;
    --grid-gap-lg: 24px;

    --section-padding-y: 56px;
    --section-padding-y-lg: 72px;

    --dashboard-content-gap: 24px;
    --dashboard-card-padding: 20px;

    --header-height: var(--header-height-mobile);
  }

  h1 {
    font-size: clamp(2.25rem, 9vw, 3.5rem);
  }

  h2 {
    font-size: clamp(1.875rem, 7vw, 2.75rem);
  }

  .container,
  .container--wide,
  .container--narrow {
    width: min(
      100% - (var(--container-padding) * 2),
      var(--container-max)
    );
  }
}


/* ==================================================
   الهواتف
   ================================================== */

@media (max-width: 480px) {

  :root {
    --container-padding: 16px;

    --grid-gap: 14px;

    --section-padding-y: 48px;
    --section-padding-y-lg: 60px;

    --dashboard-card-padding: 16px;

    --control-height: 40px;
    --control-height-lg: 46px;

    --button-padding-x: 16px;
  }

  body {
    font-size: 0.9375rem;
  }

  h1 {
    font-size: clamp(2rem, 10vw, 2.75rem);
  }

  h2 {
    font-size: clamp(1.75rem, 8vw, 2.25rem);
  }

  .container,
  .container--wide,
  .container--narrow {
    width: calc(100% - 32px);
  }
}