/**
 * Design Tokens — Marcil
 * Variables only — no rules
 */

:root {
  /* ── Colors: Primary ── */
  --color-primary:        #cc0000;
  --color-primary-dark:   #9e0000;
  --color-primary-light:  #ff4d4d;

  /* ── Colors: Neutral (structural chrome) ── */
  --color-neutral:        #505f76;   /* Metallic Gray */
  --color-neutral-dark:   #38485d;
  --color-neutral-light:  #b7c8e1;

  /* ── Colors: Accent ── */
  --color-accent:         #cc0000;
  --color-accent-dark:    #9e0000;

  /* ── Colors: Special ── */
  --color-gold:           var(--color-accent);   /* CTA arrow في الـ hero */
  --color-oa-bg:          #d0e1fb;   /* خلفية badge وصول مجاني */
  --color-oa-text:        #505f76;   /* نص badge وصول مجاني */

  /* ── Colors: Neutrals ── */
  --color-bg:             #f7f9fb;
  --color-surface:        #ffffff;
  --color-surface-alt:    #eceef0;
  --color-border:         #e2e8f0;
  --color-border-light:   #f2f4f6;

  /* ── Colors: Typography ── */
  --color-text:           #191c1e;
  --color-text-secondary: #505f76;
  --color-text-muted:     #926e69;
  --color-text-inverse:   #ffffff;

  /* ── Colors: Semantic ── */
  --color-success:        #2d9e6b;
  --color-warning:        #e8a020;
  --color-danger:         #ba1a1a;
  --color-info:           #cc0000;

  /* ── Dashboard Sidebar ── */
  --sidebar-bg:           #ffffff;
  --sidebar-text:         #505f76;
  --sidebar-active-bg:    #d0e1fb;
  --sidebar-active-text:  #cc0000;
  --sidebar-hover-bg:     #f7f9fb;
  --sidebar-width:        260px;

  /* ── Spacing ── */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;

  /* ── Border Radius ── */
  --radius-sm:   4px;    /* buttons, inputs, alerts, tags */
  --radius-md:   4px;    /* نفس الـ sm — نظام sharp موحّد */
  --radius-lg:   8px;    /* cards, widgets, panels — rounded-lg */
  --radius-full: 9999px; /* badges, pills فقط */

  /* ── Shadows ── */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.10);

  /* ── Typography Scale ── */
  --text-xs:   0.75rem;    /* 12px */
  --text-sm:   0.875rem;   /* 14px */
  --text-base: 1.0rem;     /* 16px */
  --text-md:   1.125rem;   /* 18px */
  --text-lg:   1.25rem;    /* 20px */
  --text-xl:   1.5rem;     /* 24px */
  --text-2xl:  1.75rem;    /* 28px */
  --text-3xl:  2.0rem;     /* 32px */
  --text-4xl:  2.5rem;     /* 40px */

  /* ── Line Heights ── */
  --leading-tight:  1.3;
  --leading-normal: 1.6;
  --leading-loose:  1.8;

  /* ── Misc ── */
  --transition:    0.2s ease;
  --container-max: 1200px;
  --topbar-height: 72px;  /* navbar height */
  --color-backdrop:       rgba(15, 23, 42, 0.75);
}