/* Hashem Alalem — Color tokens
   Base palette: near-black neutral surface system + the brand gradient
   (teal → indigo/purple → blue) reserved as an accent, never a fill wash. */

:root {
  /* ---- Base neutrals (dark-mode primary) ---- */
  --n-black: #0a0a0d;
  --n-950: #0e0e12;
  --n-900: #131318;
  --n-850: #191a20;
  --n-800: #202128;
  --n-700: #2b2c35;
  --n-600: #40414d;
  --n-500: #5b5d6b;
  --n-400: #82838f;
  --n-300: #a9aab3;
  --n-200: #cbccd2;
  --n-100: #e6e6e9;
  --n-50:  #f5f5f6;
  --n-white: #ffffff;

  /* ---- Brand hues (sampled from the logo gradient) ---- */
  --brand-teal:   #2ee6c6;
  --brand-cyan:   #2fd8e0;
  --brand-blue:   #3b6fe0;
  --brand-indigo: #5a3fd6;
  --brand-purple: #4b2ca0;

  /* ---- Brand gradient (the mark's exact sweep) ---- */
  --brand-gradient: linear-gradient(100deg, var(--brand-teal) 0%, var(--brand-indigo) 48%, var(--brand-blue) 78%, var(--brand-cyan) 100%);
  --brand-gradient-soft: linear-gradient(100deg, color-mix(in oklch, var(--brand-teal) 55%, transparent) 0%, color-mix(in oklch, var(--brand-indigo) 55%, transparent) 50%, color-mix(in oklch, var(--brand-blue) 55%, transparent) 100%);
  --brand-glow: radial-gradient(circle, color-mix(in oklch, var(--brand-blue) 45%, transparent) 0%, transparent 70%);

  /* ---- Semantic surfaces (dark-mode primary) ---- */
  --surface-app: var(--n-black);
  --surface-canvas: var(--n-950);
  --surface-card: var(--n-900);
  --surface-card-raised: var(--n-850);
  --surface-inset: var(--n-950);
  --surface-overlay: rgba(10, 10, 13, 0.72);

  /* ---- Semantic text ---- */
  --text-primary: var(--n-white);
  --text-secondary: var(--n-300);
  --text-tertiary: var(--n-500);
  --text-on-brand: var(--n-black);
  --text-link: var(--brand-cyan);
  --text-link-hover: var(--brand-teal);

  /* ---- Borders ---- */
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-default: rgba(255, 255, 255, 0.14);
  --border-strong: rgba(255, 255, 255, 0.24);
  --border-brand: var(--brand-blue);

  /* ---- Semantic states ---- */
  --state-success: #34d399;
  --state-warning: #f5b942;
  --state-danger:  #f2545b;
  --state-info:    var(--brand-cyan);

  /* ---- Light-mode surfaces (secondary theme, used sparingly e.g. print/newsletter) ---- */
  --surface-app-light: var(--n-white);
  --surface-card-light: var(--n-50);
  --text-primary-light: var(--n-black);
  --text-secondary-light: #52535c;
  --border-light: rgba(10, 10, 13, 0.1);
}