/* ==========================================================================
   ELIAS NET — Pro Theme System (Light Only)
   White base + vivid red/orange accents. Professional & warm.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700&display=swap');

:root {
  /* ---- Brand palette (White + Red/Orange) ---- */
  --c-bg:            #F7F8FA;   /* page background (soft off-white) */
  --c-surface:       #FFFFFF;   /* cards, panels */
  --c-surface-2:     #F3F4F7;   /* elevated / inputs / hover */
  --c-surface-3:     #E9EBF0;   /* borders, dividers */
  --c-text:          #14171F;   /* primary text (near-black) */
  --c-text-muted:    #5B6270;   /* secondary text */
  --c-text-dim:      #8A90A0;   /* tertiary / captions */
  --c-border:        #E2E5EC;   /* subtle borders */
  --c-border-strong: #C9CEDB;   /* stronger borders */

  /* Primary accent — vivid red */
  --c-accent:        #E63946;   /* confident red */
  --c-accent-hover:  #D62839;   /* darker red on hover */
  --c-accent-press:  #B71C2C;   /* pressed */
  --c-accent-soft:   rgba(230, 57, 70, 0.10);
  --c-accent-ring:   rgba(230, 57, 70, 0.30);

  /* Secondary accent — vivid orange */
  --c-amber:         #F77F00;   /* vivid orange */
  --c-amber-soft:    rgba(247, 127, 0, 0.12);
  --c-amber-hover:   #E67100;

  /* Status */
  --c-success:       #16A34A;
  --c-success-soft:  rgba(22, 163, 74, 0.10);
  --c-warning:       #F59E0B;
  --c-warning-soft:  rgba(245, 158, 11, 0.12);
  --c-danger:        #DC2626;
  --c-danger-soft:   rgba(220, 38, 38, 0.10);
  --c-info:          #0EA5E9;
  --c-info-soft:     rgba(14, 165, 233, 0.10);

  /* Typography */
  --font-sans: 'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, system-ui, sans-serif;
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 0.95rem;
  --fs-md: 1.05rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.5rem;
  --fs-2xl: 2rem;
  --fs-3xl: 2.75rem;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --lh-tight: 1.25;
  --lh-base: 1.6;
  --lh-loose: 1.8;

  /* Spacing scale */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;

  /* Radii */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-2xl: 28px;
  --r-full: 9999px;

  /* Shadows — soft, layered */
  --sh-xs: 0 1px 2px rgba(20,23,31,0.04);
  --sh-sm: 0 2px 8px rgba(20,23,31,0.06);
  --sh-md: 0 8px 24px rgba(20,23,31,0.08);
  --sh-lg: 0 20px 50px rgba(20,23,31,0.12);
  --sh-glow: 0 0 0 3px var(--c-accent-ring), 0 8px 24px rgba(230,57,70,0.15);

  /* Layout */
  --container-max: 1200px;
  --header-h: 64px;
  --sidebar-w: 260px;
  --sidebar-w-collapsed: 76px;

  /* Motion */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 0.15s;
  --t-base: 0.25s;
  --t-slow: 0.4s;
}

/* ---- Reset / base ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: var(--lh-base);
  color: var(--c-text);
  background-color: var(--c-bg);
  direction: rtl;
  text-align: right;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  color: var(--c-text);
}
p { margin: 0; line-height: var(--lh-base); }
a { color: var(--c-accent); text-decoration: none; transition: color var(--t-fast) var(--ease); }
a:hover { color: var(--c-accent-hover); }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
::selection { background: var(--c-accent-soft); color: var(--c-accent-press); }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--c-border-strong); border-radius: var(--r-full); }
::-webkit-scrollbar-thumb:hover { background: var(--c-text-muted); }

:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }

/* Utility */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ---- Legacy compatibility aliases ---- */
:root {
  --primary-color:   var(--c-accent);
  --secondary-color: var(--c-accent-press);
  --accent-color:    var(--c-amber);
  --elias-net-color: var(--c-accent-press);
  --warning-color:   var(--c-warning);
  --info-color:      var(--c-info);
  --danger-color:    var(--c-danger);
  --success-color:   var(--c-success);
  --light-gray:      var(--c-surface-2);
  --medium-gray:     var(--c-surface-3);
  --dark-gray:       var(--c-text-dim);
  --border-color:    var(--c-border);
  --shadow-light:    rgba(20,23,31,0.05);
  --shadow-medium:   rgba(20,23,31,0.08);
  --text-dark:       var(--c-text);
  --text-light:      var(--c-text-muted);
  --white:           var(--c-surface);
  --link-color:      var(--c-accent);
}