/* Marrar — Color tokens */
:root {
  /* Brand blue (base #59AAFF) */
  --blue-50: #eff6ff;
  --blue-100: #dcebff;
  --blue-200: #bedaff;
  --blue-300: #93c3ff;
  --blue-400: #59aaff; /* brand primary */
  --blue-500: #3b8fef;
  --blue-600: #2673d6;
  --blue-700: #1e5aab;
  --blue-800: #1c4a85;
  --blue-900: #1b3e6b;

  /* Brand orange (base #F59919) */
  --orange-50: #fef6ec;
  --orange-100: #fde9ce;
  --orange-200: #fbd198;
  --orange-300: #f8b458;
  --orange-400: #f59919; /* brand accent */
  --orange-500: #e07f0c;
  --orange-600: #bc6309;
  --orange-700: #964d0e;

  /* Deep navy (dark sections) */
  --navy-700: #12314f;
  --navy-800: #0d2340;
  --navy-900: #0b1e33;
  --navy-950: #081627;

  /* Cool neutral ramp */
  --neutral-0: #ffffff;
  --neutral-50: #f7f9fb;
  --neutral-100: #f0f3f6;
  --neutral-200: #e2e7ed;
  --neutral-300: #c6cdd6;
  --neutral-400: #97a2af;
  --neutral-500: #6b7785;
  --neutral-600: #4a5765;
  --neutral-700: #33414f;
  --neutral-800: #1e2a3a;
  --neutral-900: #0f1b2a;

  /* Semantic status */
  --success: #1f9d63;
  --warning: var(--orange-500);
  --danger: #d64545;
  --info: var(--blue-600);

  /* ---- Semantic aliases ---- */
  --color-primary: var(--blue-400);
  --color-primary-strong: var(--blue-600); /* text / links on light */
  --color-primary-deep: var(--blue-700);
  --color-accent: var(--orange-400);
  --color-accent-strong: var(--orange-500);

  --surface-page: var(--neutral-0);
  --surface-subtle: var(--neutral-50);
  --surface-muted: var(--neutral-100);
  --surface-card: var(--neutral-0);
  --surface-inverse: var(--navy-900);
  --surface-inverse-deep: var(--navy-950);

  --text-strong: var(--neutral-900);
  --text-body: var(--neutral-700);
  --text-muted: var(--neutral-500);
  --text-faint: var(--neutral-400);
  --text-on-inverse: var(--neutral-0);
  --text-on-inverse-muted: #9db4cf;
  --text-link: var(--blue-600);
  --text-link-hover: var(--blue-700);

  --border-subtle: var(--neutral-200);
  --border-default: var(--neutral-300);
  --border-inverse: rgba(255, 255, 255, 0.12);

  /* Gradients & glows (restrained) */
  --gradient-brand: linear-gradient(135deg, var(--blue-400) 0%, var(--blue-600) 100%);
  --gradient-sky: linear-gradient(180deg, #f4f9ff 0%, #ffffff 60%); /* @kind color */
  --gradient-inverse: linear-gradient(165deg, var(--navy-800) 0%, var(--navy-950) 100%);
  --gradient-accent: linear-gradient(135deg, var(--orange-300) 0%, var(--orange-500) 100%);
  --glow-brand: 0 24px 60px -20px rgba(59, 143, 239, 0.45);
  --glow-accent: 0 20px 50px -18px rgba(245, 153, 25, 0.4);
}