/* ============================================================
   COLOR SYSTEM — Nexgen Solutions Chitral
   Dark-first. Predominantly black + white with controlled accent.
   ============================================================ */
:root {
  /* --- Base palette --- */
  --color-black: #070707;
  --color-surface-1: #111111;
  --color-surface-2: #181818;
  --color-surface-3: #222222;
  --color-white: #ffffff;

  --color-gray-100: #e6e6e6;
  --color-gray-200: #b8b8b8;
  --color-gray-400: #777777;
  --color-gray-600: #303030;

  /* --- Brand accent --- */
  --color-accent-cyan: #00c2ff;   /* primary  */
  --color-accent-blue: #0066ff;   /* secondary */
  --color-accent-violet: #7c3aed; /* highlight */

  /* --- Semantic feedback --- */
  --color-success: #22c55e;
  --color-warning: #f59e0b;
  --color-danger: #ef4444;

  /* ============================================================
     SEMANTIC ALIASES — reference these in components, not raw hex
     ============================================================ */
  --canvas: var(--color-black);
  --surface-primary: var(--color-surface-1);
  --surface-secondary: var(--color-surface-2);
  --surface-elevated: var(--color-surface-3);

  --text-primary: var(--color-white);
  --text-secondary: var(--color-gray-200);
  --text-muted: var(--color-gray-400);
  --text-on-accent: var(--color-black);

  --brand-primary: var(--color-accent-cyan);
  --brand-secondary: var(--color-accent-blue);
  --brand-highlight: var(--color-accent-violet);

  --border-default: var(--color-gray-600);
  --border-strong: #454545;
  --border-focus: var(--color-accent-cyan);

  /* Signature two-tone accent gradient (cyan -> blue) */
  --gradient-accent: linear-gradient(90deg, var(--color-accent-cyan), var(--color-accent-blue));
  /* Subtle hero glow — restrained, never a full-section wash. @kind other */
  --glow-accent: radial-gradient(60% 80% at 70% 30%, rgba(0,194,255,0.14), transparent 70%); /* @kind other */

  --focus-ring: 0 0 0 2px var(--canvas), 0 0 0 4px var(--brand-primary);
}