/*
 * coraxphone design tokens
 * غيّر لوحة ألوان المشروع من هذا الملف فقط.
 */
:root {
  /* Brand */
  --color-brand-50: #eeeeff;
  --color-brand-100: #dfe0ff;
  --color-brand-300: #aeb0ff;
  --color-brand-400: #7778ff;
  --color-brand-500: #5b5cf0;
  --color-brand-600: #4546d8;
  --color-brand-700: #3235c9;

  /* Logo accent */
  --color-accent-400: #20c7ff;
  --color-accent-500: #009eea;
  --color-join-start: #5b5cf0;
  --color-join-end: #3537b8;

  /* Neutral */
  --color-white: #ffffff;
  --color-canvas: #f7f8fc;
  --color-surface-muted: #f1f3f9;
  --color-border: #e5e7f0;
  --color-text-muted: #72778e;
  --color-text: #171a2b;

  /* Navigation */
  --color-navy-700: #26294b;
  --color-navy-800: #1c1f3b;
  --color-navy-900: #111329;
  --color-nav-text: #aeb2cb;

  /* Status */
  --color-success: #15966b;
  --color-success-soft: #e8f8f1;
  --color-warning: #d98a15;
  --color-warning-soft: #fff5df;
  --color-danger: #d94c5c;
  --color-danger-soft: #ffebee;

  /* Shared semantic aliases used throughout the project */
  --bg: var(--color-canvas);
  --surface: var(--color-white);
  --surface-2: var(--color-surface-muted);
  --text: var(--color-text);
  --muted: var(--color-text-muted);
  --line: var(--color-border);
  --primary: var(--color-brand-500);
  --primary-dark: var(--color-brand-600);
  --primary-soft: var(--color-brand-50);
  --success: var(--color-success);
  --success-soft: var(--color-success-soft);
  --warning: var(--color-warning);
  --warning-soft: var(--color-warning-soft);
  --danger: var(--color-danger);
  --danger-soft: var(--color-danger-soft);
  --shadow: 0 12px 40px rgba(34, 38, 70, .08);
  font-family: "Cairo", system-ui, sans-serif;
}

/* Components whose legacy styles predate the tokens */
.sidebar { background: var(--color-navy-900); }
.nav-list a { color: var(--color-nav-text); }
.nav-list a:hover { background: var(--color-navy-800); }
.nav-list a.active,
.nav-list a[aria-current="page"] { background: var(--color-navy-700); }
.join-section { background: linear-gradient(135deg, var(--color-join-start), var(--color-join-end)); }
.preview-join { display: flex; min-height: 78px; flex-direction: column; justify-content: center; margin-block-start: 16px; padding: 13px; border-radius: 12px; background: linear-gradient(135deg, var(--color-join-start), var(--color-join-end)); color: #ffffff; }
.preview-join strong,
.preview-join small { display: block; }
.preview-join strong { font-size: 10px; }
.preview-join small { margin-block-start: 3px; color: rgba(255, 255, 255, .72); font-size: 8px; }