/* ═══════════════════════════════════════════════════════
   NORARA — Color tokens
   One brand (blue #3B82F6) shared across Admin (dark console)
   and Hub (light B2C). Signature gradient: green → cyan → blue.
   ═══════════════════════════════════════════════════════ */
:root {
  /* ── Brand ─────────────────────────────────────────── */
  --brand:        #3B82F6;
  --brand-rgb:    59, 130, 246;  /* @kind other */
  --brand-light:  #60A5FA;
  --brand-dim:    #2563EB;
  --brand-muted:  #EFF6FF;
  /* Signature ribbon gradient (lifted from the logo mark) */
  --brand-gradient: linear-gradient(135deg, #4ADE80, #22D3EE, #3B82F6);  /* @kind color */
  --brand-gradient-soft: linear-gradient(135deg, rgba(74,222,128,0.10), rgba(34,211,238,0.10), rgba(59,130,246,0.10));  /* @kind color */

  /* Norara navy — wordmark + dark-theme base */
  --navy: #16214B;

  /* ── Primary scale (blue) ──────────────────────────── */
  --primary-50:  #EFF6FF;
  --primary-100: #DBEAFE;
  --primary-200: #BFDBFE;
  --primary-300: #93C5FD;
  --primary-400: #60A5FA;
  --primary-500: #3B82F6;
  --primary-600: #2563EB;
  --primary-700: #1D4ED8;
  --primary-800: #1E40AF;
  --primary-900: #1E3A8A;

  /* ── Accent (gold) — reserved for trophy / award moments only ── */
  --accent-300: #FCD34D;
  --accent-400: #FBBF24;
  --accent-500: #F59E0B;
  --accent-600: #D97706;
  --accent-700: #B45309;
  --accent-gradient: linear-gradient(135deg, #FBBF24 0%, #F59E0B 100%);  /* @kind color */

  /* ── Semantic ──────────────────────────────────────── */
  --success:       #16A34A;
  --success-text:  #15803D;
  --success-tint:  #DCFCE7;
  --success-border:#86EFAC;
  --warning:       #F59E0B;
  --warning-text:  #B45309;
  --warning-tint:  #FEF3C7;
  --danger:        #DC2626;
  --danger-text:   #B91C1C;
  --danger-tint:   #FEE2E2;
  --danger-border: #FCA5A5;
  --info:          #3B82F6;
  --info-tint:     #DBEAFE;

  /* ── Neutral ramp (Toss-style cool gray) ───────────── */
  --neutral-0:   #FFFFFF;
  --neutral-50:  #F9FAFB;
  --neutral-100: #F4F5F7;
  --neutral-200: #E5E8EB;
  --neutral-300: #D1D6DB;
  --neutral-400: #B0B8C1;
  --neutral-500: #8B95A1;
  --neutral-600: #606C7A;
  --neutral-700: #333D4B;
  --neutral-800: #191F28;
  --neutral-900: #0B0F19;

  /* ═══════════════════════════════════════════════════
     SEMANTIC ALIASES — LIGHT (Hub B2C + light Admin)
     The default surface everywhere except .admin-dark.
     ═══════════════════════════════════════════════════ */
  --text-1: #191F28;   /* primary text       — 15.2:1 on white */
  --text-2: #333D4B;   /* strong body        — 9.8:1  */
  --text-3: #606C7A;   /* secondary / meta   — 5.4:1  */
  --text-4: #646C7A;   /* tertiary / hint    — 5.3:1  */
  --text-5: #8B95A1;   /* disabled / faint   — 3.0:1  */

  --bg:        #F4F5F7;  /* app canvas */
  --bg-subtle: #F9FAFB;  /* inputs, chips */
  --bg-muted:  #E5E8EB;  /* section bands */
  --surface:   #FFFFFF;  /* cards */
  --elevated:  #FFFFFF;  /* modals, popovers */
  --hover:     #F4F5F7;

  --border:       #E5E8EB;
  --border-light: #D1D6DB;
  --line:         #F2F3F5;

  --input-bg:     #F9FAFB;
  --input-border: #E5E8EB;

  --overlay-1: rgba(0,0,0,0.02);
  --overlay-2: rgba(0,0,0,0.04);
  --overlay-3: rgba(0,0,0,0.07);

  --focus-ring: rgba(var(--brand-rgb), 0.25);
  --selection:  rgba(var(--brand-rgb), 0.18);
}

/* ═══════════════════════════════════════════════════════
   ADMIN DARK — pro-admin console (.admin-dark wrapper)
   Norara navy dark theme, derived from the wordmark color.
   ═══════════════════════════════════════════════════════ */
.admin-dark {
  --text-1: #F1F3F8;
  --text-2: #C8CEE0;
  --text-3: #8B95B0;
  --text-4: #6B7694;
  --text-5: #4F5A78;

  --bg:        #080C18;
  --bg-subtle: #0E1424;
  --bg-muted:  #182040;
  --surface:   #111829;
  --elevated:  #182040;
  --hover:     #1A2342;

  --border:       #253260;
  --border-light: #2E3D6A;
  --line:         #1E2A4A;

  --input-bg:     #111829;
  --input-border: #1E2745;

  --overlay-1: rgba(255,255,255,0.03);
  --overlay-2: rgba(255,255,255,0.06);
  --overlay-3: rgba(255,255,255,0.10);

  --selection: rgba(var(--brand-rgb), 0.30);
}